Elemento <pattern> no SVG

O SVG pode usar o elemento <pattern> para definir padrões. Ele é usado para preencher elementos gráficos de maneira repetitiva.

Para preencher ou contornar um objeto com gráficos pré-definidos, é necessário usar o elemento pattern. O elemento pattern permite que gráficos pré-definidos se repitam (ou se repetam) em intervalos fixos no eixo x e no eixo y, cobrindo a área a ser pintada. Primeiro, defina o padrão usando o elemento pattern, e em seguida, use os atributos fill ou stroke no elemento gráfico especificado para referenciar o padrão a ser preenchido ou contornado.

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern　id="Triangle"　width="10"　height="10"　patternUnits="userSpaceOnUse">　　　　
<polygon　points="5,0　10,10　0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle　cx="60"　cy="60"　r="50"　　fill="url(#Triangle)"/>　　　　
</svg>

O efeito de execução é como follows:

Explicação de Uso

• A propriedade id do <pattern> define o nome único do padrão.

• patternUnits é usado para definir os atributos de largura, altura, largura e altura.

• cx e cy são as coordenadas do eixo x e y da caixa de limites do padrão.