English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales de SVG

Elementos SVG

Máscara (Mask) SVG

La función de máscara de SVG puede aplicar máscaras a formas SVG. La máscara puede determinar qué partes de la forma SVG son visibles y qué transparencia tienen. Puede considerar la máscara SVG como una versión más avanzada de una ruta de recorte.

Ejemplo de máscara

Este es un ejemplo simple de máscara:

<svg width="500" height="120">
<defs
　　<mask id="mask1" x="0" y="0" width="100" height="100">
　　　　<rect　x="0"　y="0"　width="100" height="50"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect x="1" y="1" width="100" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
　　</svg>
Prueba y mira‹/›

Este ejemplo utiliza ID=mask1Definir una máscara. Dentro del elemento <mask> hay un elemento <rect>. Es este elemento <rect> el que define la forma de la máscara.

Este ejemplo también define un elemento <rect> que utiliza máscara. 　El elemento <rect> utiliza la propiedad de estilo máscara interna para referenciar la propiedad de ID de máscara.

Efecto de imagen después de ejecutar

Tenga en cuenta que la altura del rectángulo que se mostrará es10píxeles, pero la parte vertical anterior5píxeles son visibles. Esto se debe a que el rectángulo de máscara solo tiene5de altura en píxeles. El rectángulo solo es visible en la parte cubierta por el rectángulo de máscara.

El tamaño del rectángulo sin máscara es el de contorno negro.

Máscaras de otras formas

Puede usar cualquier forma SVG como máscara. Este es un ejemplo de usar un círculo como máscara:

<svg>
　　<defs
　　　　<mask id="mask2" x="0" y="0" width="100" height="100">
　　　　　　<circle cx="25" cy="25" r="25"　style="stroke:none;　fill:　#ffffff"/>
　　　　</mask>
　　</defs>
　　<rect x="1" y="1" width="100" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>
</svg>
Prueba y mira‹/›

Efecto de imagen después de ejecutar

Vuelva a tener en cuenta que solo se puede ver el rectángulo que referencea la máscara visible en el círculo.

Color de la forma de máscara definición de opacidad de máscara

Hasta ahora, el color de relleno de la forma de máscara (círculo o rectángulo) se ha configurado como #ffffff. El color de la forma de máscara se define usando la opacidad de la forma de máscara. Cuanto más cerca del #ffffff (blanco) esté el color de la forma de máscara, más opaca será la forma que se usa con la máscara. Cuanto más cerca del #000000 (negro) esté el color de la forma de máscara, más transparente será la forma que se usa con la máscara.

Este es un ejemplo donde la máscara está compuesta por dos colores diferentes (66666constituido por rectángulos. La máscara se utiliza para un solo rectángulo, por lo que puede usar la máscara para ver cómo dos formas diferentes dentro de la máscara afectan la misma forma.

<svg width="500" height="120">
<defs
　　<mask id="mask3" x="0" y="0" width="100" height="100">
　　　　<rect x="0" y="0" width="100" height="50"
　　　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　　　<rect x="0" y="50" width="100" height="50"
　　　　　　　　　　style="stroke:none; fill: #666666"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　Este texto está debajo del rectángulo
</text>
<rect x="1" y="1" width="100" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
　　</svg>
Prueba y mira‹/›

Este ejemplo también incluye un texto debajo del rectángulo, que solo se puede ver a través de la parte semitransparente de la máscara del rectángulo.

Efecto de imagen después de ejecutar

Este texto está debajo del rectángulo

Uso de gradientes en máscaras

Si se aplica un gradiente a la forma de la máscara, se puede lograr que la forma de la máscara tenga transparencia de gradiente.

Este es un ejemplo de definir un gradiente, usar una máscara de gradiente, un rectángulo de máscara y el texto debajo del rectángulo, por lo que puede ver cómo cambia la opacidad del gradiente de la máscara:

<svg width="500" height="120">
<defs
　　　　<linearGradient id="gradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="100%" y2="0%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"
　　　　　　　　<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
　　　　　　　　<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
　　　　</linearGradient>
　　　　<mask id="mask4" x="0" y="0" width="200" height="100">
　　　　　　　　<rect x="0" y="0" width="200" height="100"
　　　　　　　　　　　　style="stroke:none; fill: url(#gradient1)"/>
　　　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　Este texto está debajo del rectángulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>
　　</svg>
Prueba y mira‹/›

Efecto de imagen después de ejecutar

Este texto está debajo del rectángulo

Las máscaras de gradiente se pueden combinar con otros efectos (por ejemplo, patrones de relleno). Este es un ejemplo en el que se ve que el rectángulo usa un patrón de relleno como relleno y tiene un gradiente en su máscara:

<svg width="500" height="120">
<defs
　　<linearGradient id="gradient2"
　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　x2="100%" y2="0%"
　　　　　　　　　　　　　　　　spreadMethod="pad"
　　　　<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
　　　　<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
　　</linearGradient>
　　<pattern id="pattern2"
　　　　　　　　　x="10" y="10" width="20" height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff"　/>
　　</pattern"
　　<mask id="mask6" x="0" y="0" width="200" height="100">
　　　　　　<rect x="0" y="0" width="200" height="100"
　　　　　　　　　　style="stroke:none; fill: url(#gradient2)"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　Este texto está debajo del rectángulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　　　style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
　　</svg>
Prueba y mira‹/›

Tenga en cuenta cómo se refiere el rectángulo a su patrón de relleno en las propiedades CSS de fill y cómo se refiere a su máscara.

Efecto de imagen después de ejecutar

Este texto está debajo del rectángulo

Uso de patrones de relleno en máscaras

También puede usar patrones de relleno en máscaras para que la máscara tome la forma del patrón de relleno. Este es un ejemplo:

<svg width="500" height="120">
<defs
　　<pattern id="pattern1"
　　　　　　　　　x="10" y="10" width="20" height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　　　<circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999"　/>
　　</pattern"
　　<mask id="mask5" x="0" y="0" width="200" height="100">
　　　　<rect x="0" y="0" width="200" height="100"
　　　　　　　　style="stroke:none; fill: url(#pattern)1)"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　Este texto está debajo del rectángulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
　　</svg>
Prueba y mira‹/›

Efecto de imagen después de ejecutar. Nota: el rectángulo es semi透明，dónde el patrón de relleno dibuja círculos y en otras partes completamente transparente.

Este texto está debajo del rectángulo
Filtro <filter> SVGRuta de recorte <clippath> SVG