Tutoriales de SVG

Elementos SVG

Elemento de animación SVG <Animation>Elemento <clipPath> de SVG

Elemento <mask> de SVG

Al usar la función de máscara de SVG, puedes aplicar la máscara a las formas SVG. La máscara de SVG es una versión más avanzada de la ruta de recorte, utilizada para determinar qué partes de la forma SVG son visibles y qué transparencias tienen.

En SVG, puedes referirte a una capa de superposición transparente y combinarla con el objeto actual para formar el fondo. La capa de superposición transparente puede ser cualquier otro objeto gráfico o elemento <g>. El elemento mask se utiliza para definir tal elemento de máscara. La propiedad mask se utiliza para referirse a un elemento de máscara.

Ejemplo en línea

Crear una máscara rectangular azul

Ejemplo

<svg　height="450"　width="450">
　<defs>
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="100"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect x="1"　y="1" width="200"　height="200"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
</svg>

Prueba aquí‹/›

El efecto después de ejecutar se muestra a continuación:

Explicación de uso

El atributo id del elemento <mask> define el nombre único de la máscara.
El elemento <rect> del <mask> define la forma de la máscara.
El atributo style del elemento <rect> hace que el elemento de ID de máscara tenga la propiedad CSS de máscara.

Más ejemplos en línea

Efecto de superposición de texto

Ejemplo

<svg　width="200"　height="80"　
　　　　　viewBox="0　0　200　80"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask　id="myMask"　maskUnits="userSpaceOnUse"
　　　　　　　　　　　　　　x="0"　y="0"　width="200"　height="80">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="100"　height="80"　fill="white"/>
　　　　　　　　</mask>
　　　　　　　　<text　id="Text"　x="100" y="48"　
　　　　　　　　　　　　　　font-size="26"　font-weight="bold"　text-anchor="middle">
　　　　　　　　　　　　Negro y blanco
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　Dibujar un rectángulo negro en el fondo　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　Dibujar dos veces la cadena de texto. Primero, texto blanco sin máscara. Segundo, texto negro con máscara-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

Prueba y mira ‹/›

El efecto después de ejecutar se muestra a continuación:

Elemento de animación SVG <Animation>Elemento <clipPath> de SVG