Tutorial de SVG

Elementos SVG

Filtro <filter> no SVG Manual de Referência SVG

Caminho de Corte <clippath> no SVG

O caminho de cortes de SVG (também conhecido como SVG cortes) é usado para cortar formas SVG com base em um caminho específico. A parte da forma dentro do caminho é visível, enquanto a parte externa não é.

Exemplo de caminho de recorte

Este é um exemplo simples de caminho de recorte:

Exemplo

<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25" cy="25" r="20" estilo="preenchimento: #0000ff; recorte:-path: url(#clipPath); "></circle>
</svg>
<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath2">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25" cy="25" r="20" estilo="preenchimento: #0000ff; recorte:-path:　url(#clipPath2); "></circle>
　　　　<rect　x="15"　y="15"　width="40"　height="40" estilo="trace: #000000; preenchimento:nenhum;"></rect>
</svg>

Teste para ver‹/›

Este exemplo define um caminho de recorte que se assemelha a um retângulo (a forma dentro do elemento <clipPath>)-path referenciou o atributo id <clipPath>.

No canto inferior esquerdo está a imagem gerada. À direita está a mesma imagem, mas também foi desenhado o caminho de recorte.

Observe que apenas a parte circular dentro do caminho de recorte é visível. O resto será cortado.

Caminhos de recorte avançados

Pode usar outras formas além do retângulo como caminho de recorte. Pode usar círculos, elipses, polígonos ou caminhos personalizados. Qualquer forma SVG pode ser usada como caminho de recorte.

Este é um exemplo de usar o elemento <path> como caminho de recorte, pois esses são os tipos mais avançados de caminhos de recorte disponíveis. O caminho de recorte será aplicado ao elemento <rect>.

Exemplo

<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90" estilo="trace: nenhuma; preenchimento:#00ff00; "></rect>
</svg>
<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath3">
　　　　　　　　　　　　<path d="M10,10　q60,60　100,0 q50,50　50,50,0 l40,0 l-40,40,0 l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect　x="5"　y="5"　width="190"　height="90" estilo="trace: nenhuma; preenchimento:#00ff00; recorte:-path:　url(#clipPath3);"></rect>
</svg>

Teste para ver‹/›

Esta é a imagem gerada-à direita. À esquerda está a imagem sem caminho de recorte.

Recorte de caminho no grupo

Pode usar caminhos de recorte em um grupo de formas SVG, em vez de usá-los em cada forma separadamente. Basta colocar as formas dentro do elemento <g>, e então definir as propriedades CSS clip no elemento <g>.-path. Este é um exemplo:

Exemplo

<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90" estilo="trace: nenhuma; preenchimento:#00ff00; "></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath4">
　　　　　　　　　　　　<rect　x="10"　y="20" largura="100"　height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath4);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

Teste para ver‹/›

A seguir está a imagem sem caminho de recorte, seguida da imagem aplicando o caminho de recorte:

Texto como caminho de recorte

Também pode usar o texto como caminho de recorte. Este é um exemplo:

Exemplo

<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90" estilo="trace: nenhuma; preenchimento:#00ff00; "></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg largura="200" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath5">
　　　　　　　　　　　　<text x="10"　y="20" estilo="font-tamanho:　20px; ">
　　　　　　　　　　　　　　　　Este é um texto
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath5);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

Teste para ver‹/›

Este é o resultado da imagem com e sem caminho de corte:

Como você vê, atualmente só é exibida uma parte da forma interna do texto.

Filtro <filter> no SVG Manual de Referência SVG