Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

SVG (IX)

Máscaras

Definición

Una máscara es una ventana que sólo deja ver los elementos enmascarados en ciertos lugares del contenedor svg.

Por ejemplo, podemos crear una máscara con forma de círculo, entonces los elementos que haya dentro de esa máscara sólo se verán dentro del círculo, quedando ocultos los elementos o la parte de los elementos que no estén dentro del círculo.

La forma de la máscara se delimita mediante una o varias figuras o rutas. Los elementos que pongamos dentro de la máscara sólo se verán si asoman por el espacio que ocupa la máscara. La máscara en sí misma no es visible, a no ser que pongamos una figura de fondo de otro color (por ejemplo un rectángulo) que sea más grande que la máscara.

Tenemos dos formas de hacer máscaras, mediante el elemento clipPath y el elemento mask.

El elemento clipPath

Para crear una máscara utilizamos la etiqueta clipPath. Pondremos siempre el atributo id de identificación. También podemos poner el atributo clipPathUnits.

<clipPath id="mascara1" clipPathUnits="useSpaceOnUse">
... figuras que forman la máscara ...
</clipPath>

El atributo clipPathUnits indica el origen de coordenadas de las figuras que estarán dentro de la máscara. Como valores podemos poner userSpaceOnUse (valor por defecto), que conserva el origen de coordenadas de la caja principal, o objectBoundingBox que crea un origen de coordenadas a partir del espacio que ocupa la máscara.

Dentro de la etiqueta clipPath pondremos las figuras que forman la máscara. Como esta es una etiqueta de definición, la incluiremos dentro de la etiqueta defs

Después para que uno o varios elementos estén dentro de la máscara, lo indicaremos en esos elementos con el atributo clip-path cuyo valor será la url hacia ese elemento:

clip-path="url(#id_mascara)"

El ejemplo que hemos puesto aquí a la derecha tiene una máscara que consiste en un círculo a través del cual se muestra una imagen y varios cuadrados semitransprentes. el código es el siguiente.

<svg width="270" height="270">
<defs>
<clipPath id="mascara1" clipPathUnits="useSpaceOnUse">
  <circle cx="135" cy="135" r="130" />
</clipPath>
</defs>

<g clip-path="url(#mascara1)" >
  <image xlink:href="objetos/nieve.jpg" x="0" y="0" width="350" height="270" />
  <g fill="lime" stroke="maroon" stroke-width="5" fill-opacity="0.25">
    <rect x="5" y="5" width="130" height="130" />
    <rect x="135" y="5" width="130" height="130" />  
    <rect x="5" y="135" width="130" height="130" />
    <rect x="135" y="135" width="130" height="130" /> 
  </g>
</g>
</svg>

Ponemos aquí a la derecha la imagen que hemos usado por si quieres copiarla para seguir el ejemplo.

Observa que los elementos que forman la máscara, en este caso el círculo, no necesitan tener definido el color de fondo ni los bordes ("fill" o "stroke").

También puedes observar que hemos puesto los cuatro cuadrados que forman las ventanas dentro de un elemento g que permite darles el mismo estilo a todos sin necesidad de repetirlo en cada uno de ellos.

El elemento mask

Podemos usar también el elemento mask para crear una máscara. Su uso es parecido al del elemento clipPath. Sin embargo tiene algunas diferencias.

Para cear la máscara utilizaremos la etiqueta mask que llevará el atributo id para identificarla:

<mask id="id_mascara"> ..... </mask>

Además del atributo id podemos poner los atributos maskUnits y maskContentUnits, los valores que admiten estos atributos son userSpaceOnUse y objectBouldingBox, que indican el origen de coordenadas para los elementos, tal como ocurre con clipPathUnits. La diferencia entre ambos atributos es que maskUnits se refiere a la máscara en sí, mientras que maskContentUnits se refiere a los elementos que se incluyen dentro de la máscara.

Para incluir elementos dentro de la máscara, a estos les pondremos el aributo mask cuyo valor será la url de la máscara:

mask="url(#id_mascara)"

Otra diferencia con clipPath es que los elementos que forman la máscara (dentro de la etiqueta mask) tienen que tener un color de fondo (fill), el componente de la escala de grises de este color se "mezcla" con el color de los elementos de la máscara, formando una transparencia, de manera que si ponemos el color blanco el elemento se vera totalmente, y si ponemos el negro el elemento no se verá.

En el ejemplo que hemos puesto aquí a la derecha hemos puesto cuatro círculos dentro de una máscara, cada uno con un color. Como elementos incluidos en la máscara hemos puesto una foto (la misma que en el ejemplo anterior) y un rectángulo semitransprente. Tanto la foto como el rectángulo cubren toda la máscara. Los diferentes tonos en cada circulo se deben a que cada uno de ellos es de diferente color.

el código empleado para hacer el ejemplo es el siguiente:

<svg width="270" height="270" viewBox="0 0 400 400">
<defs>
<mask id="mascara2" >
   <circle cx="120" cy="120" r="110" fill="white" />
   <circle cx="280" cy="120" r="110" fill="lime" />		 
   <circle cx="120" cy="280" r="110" fill="aqua" />
   <circle cx="280" cy="280" r="110" fill="yellow" />
</mask>
</defs>
<g  mask="url(#mascara2)" >
   <image xlink:href="objetos/nieve.jpg" x="-50" y="0" width="600" height="400" />
   <rect x="0" y="0" width="400" height="400" fill="lime" opacity="0.2"/>
</g>
</svg>

En la siguiente página veremos como realizar animaciones con los elementos creados en SVG.

Animaciones

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com