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

Tutorial SVG

Elemento SVG

Máscara (Mask) SVG

A função de máscara SVG pode aplicar máscara a formas SVG. A máscara determina quais partes da forma SVG são visíveis e qual a transparência. Você pode ver a máscara SVG como uma versão mais avançada de caminho de recorte.

Exemplo de máscara

Este é um exemplo simples 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>
Teste e veja‹/›

Este exemplo usa ID=mask1Definir uma máscara. Dentro do elemento <mask> há um elemento <rect>. É exatamente este elemento <rect> que define a forma da máscara.

Este exemplo também define um elemento <rect> usando máscara. 　O elemento <rect> usa a propriedade de estilo máscara interna para referenciar a propriedade de ID da máscara.

Efeito da imagem após a execução:

Atenção, a altura do retângulo a ser exibido é100 pixels, mas a vertical50 pixels são visíveis. Isso é porque o retângulo da máscara tem apenas5Alta de 0 pixels. O retângulo é visível apenas na parte coberta pelo retângulo da máscara.

O retângulo com contorno preto é o tamanho do retângulo sem máscara.

Máscaras de outras formas

Você pode usar qualquer forma SVG como máscara. Este é um exemplo de uso de círculos 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>
Teste e veja‹/›

Efeito da imagem após a execução:

Lembre-se novamente, apenas a parte visível da circunferência da máscara é visível, onde a referência da máscara é retângulo.

Definição da cor da forma da máscara Definição da opacidade da máscara

Até agora, a cor de preenchimento da forma da máscara (circular ou retangular) é configurada para #ffffff. A cor da forma da máscara é definida pela opacidade da forma da máscara. Quanto mais perto da #ffffff (branco) a cor da forma da máscara, mais opaca será a forma usada com a máscara. Quanto mais perto da #000000 (preto) a cor da forma da máscara, mais transparente será a forma usada com a máscara.

Este é um exemplo onde a máscara é composta por dois com cores diferentes (#ffffff e66666constituído por retângulos. A máscara é usada para um único retângulo, portanto, você pode usar a máscara para ver como duas formas diferentes dentro da máscara afetam a mesma 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á abaixo do retângulo
</text>
<rect x="1" y="1" width="100" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
　　</svg>
Teste e veja‹/›

Este exemplo ainda contém um texto localizado abaixo do retângulo, que pode ser visto apenas através da parte opaca da máscara do retângulo.

Efeito da imagem após a execução:

Este texto está abaixo do retângulo

Uso de gradiente na máscara

Se aplicar um gradiente ao formato usado como máscara, é possível alcançar uma transparencia gradiente na forma aplicada pela máscara.

Este é um exemplo de definição de gradiente, usando máscara de gradiente, retângulo da máscara e texto abaixo do retângulo, portanto, você pode ver como a opacidade varia conforme o gradiente da 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á abaixo do retângulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>
　　</svg>
Teste e veja‹/›

Efeito da imagem após a execução:

Este texto está abaixo do retângulo

A máscara de gradiente pode ser usada em conjunto com outros efeitos (por exemplo, padrões de preenchimento). Este é um exemplo, onde o retângulo usa o padrão de preenchimento como preenchimento e usa um gradiente na 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á abaixo do retângulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　　　style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
　　</svg>
Teste e veja‹/›

Observe como o retângulo se referencia ao padrão de preenchimento em suas propriedades CSS de fill e como se referencia à máscara.

Efeito da imagem após a execução.

Este texto está abaixo do retângulo

Uso de padrão de preenchimento na máscara

Você também pode usar padrões de preenchimento nas máscaras para que a máscara se torne a forma do padrão de preenchimento. Este é um exemplo:

<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á abaixo do retângulo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
　　</svg>
Teste e veja‹/›

Efeito de imagem após execução. Note que o retângulo agora é semi-transparente, onde o padrão de preenchimento desenha círculos e em outras partes é completamente transparente.

Este texto está abaixo do retângulo
Filtro <filter> SVGCaminho de Cortar <clippath> SVG