Tutorial de SVG

Elementos SVG

Elemento de Animação SVG <Animation>Elemento <clipPath> no SVG

Elemento <mask> no SVG

Usando a função de máscara SVG, você pode aplicar a máscara a formas SVG. A máscara SVG é uma versão mais avançada de caminho de cortes, usada para determinar quais partes da forma SVG são visíveis e qual a transparência.

No SVG, você pode combinar uma camada de máscara transparente com o objeto atual para formar o fundo. A camada de máscara transparente pode ser qualquer outro objeto gráfico ou elemento <g>. O elemento mask é usado para definir tal elemento de máscara. A propriedade mask é usada para referenciar um elemento de máscara.

Exemplo Online

Crie uma máscara retangular azul

Exemplo

<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>

Teste e veja‹/›

O efeito após a execução é o seguinte:

Explicação de Uso

O atributo id do elemento <mask> define o nome único da máscara.
O elemento <rect> do <mask> define a forma da máscara.
O atributo style do elemento <rect> faz com que o elemento de ID de máscara tenha a propriedade CSS de máscara.

Mais Exemplos Online

Efeito de Camada de Texto

Exemplo

<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">
　　　　　　　　　　　　Black & White
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　Desenhar um retângulo preto no fundo　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　Desenhar a string de texto duas vezes. Primeiro, o texto branco sem máscara. Em seguida, o texto preto com máscara-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Elemento de Animação SVG <Animation>Elemento <clipPath> no SVG