Tutoriais de SVG

Elemento SVG

Elemento <mask> no SVG Elemento <pattern> no SVG

Elemento <clipPath> no SVG

O elemento <clipPath> do SVG é usado para cortar formas SVG com base em uma trajetória específica. Também conhecido como corte SVG. A parte da forma dentro da trajetória é visível, enquanto a parte externa é invisível.

Exemplos online

Os seguintes exemplos usam clipPath para desenhar um sector azul.

Exemplo

<svg height="450" width="450">
　　<defs>
　　　　　　<clipPath id="clip">
　　　　　　　　　　<rect x="15" y="15" width="40" height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25" cy="25"　r="30"
　　　　　　　　　　style="fill: #0000ff; clip-path: url(#clip); "　/>
</svg>

Teste e veja‹/›

O efeito de execução é o seguinte:

Explicação de uso

Agora, você pode ver que a parte circular dentro da trajetória de corte é visível e o resto cortado.
O atributo id do elemento <clipPath> define o nome único da trajetória de corte.

Mais exemplos online

Os seguintes exemplos usam clipPath para desenhar uma forma de coração:

Exemplo

<style>
svg{width:40%;height:30%}
@keyframes openYourHeart {from {r: 0} to {r:　60px}}
#myClip circle {
　　animation: openYourHeart　15s infinite;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　Tudo que está fora do círculo será cortado, portanto, não é visível.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　Como referência, o coração preto　-->
　　<path　id="heart"　d="M10,30　A20,20,0,0,1,50,30　A20,20,0,0,1,90,30　Q90,60,50,90　Q10,60,10,30　Z"></path>
　
　　<!--
　　　　Apenas a parte vermelha circular dentro do coração preto é visível;
　　　　À medida que a circunferência aumenta, ela se torna gradualmente um coração vermelho.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

Teste e veja ‹/›

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

Elemento <mask> no SVG Elemento <pattern> no SVG