Padrão de Preenchimento no SVG

O padrão de preenchimento SVG é usado para preencher formas com padrões formados por imagens. O padrão pode ser composto por imagens SVG (formas) ou imagens bitmap. O padrão de preenchimento SVG parece com o que você está acostumado no Photoshop, chamado de "tesselação".

Exemplo de padrão de preenchimento

Este é um exemplo simples de padrão de preenchimento SVG:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1" x="10"　y="10"　width="20"　height="20" patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100" estilo="cor: #000000; preenchimento: url(#pattern1);"></rect>
</svg>

Primeiro, defina o elemento <pattern> dentro do elemento <defs>. O padrão contém um elemento circle. Este elemento circle será usado como padrão de preenchimento.

Em seguida, no atributo CSS<rect>Declare um elementofillque faz referência<pattern>seustyleID do elemento.

Em seguida, declare um elemento <rect>, que faz referência ao ID do elemento <pattern> no atributo de estilo do CSS.

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

Observe como o círculo definido no elemento <pattern> é usado como preenchimento retangular. Também observe como o círculo se repete de esquerda para direita e de cima para baixo.

X, Y, largura e altura

Os atributos x e y do elemento <pattern> definem a distância do início do padrão no formato do elemento <pattern>.

Os atributos width e height do elemento <pattern> definem a largura e a altura do padrão.

Este é um exemplo de início de tudo e continuaráxeydefinido como 0:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　　　　　<circle　cx="10"　cy="10"　r="10style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke: #000000; fill: url(#pattern"2);"　/>
</svg>

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

Observe como o padrão agora começa no meio do círculo (no topo e na esquerda do retângulo). Ao criar seus próprios padrões de preenchimento, você usaráxeyos valores das propriedades para alcançar o efeito desejado.

widtheheightas propriedades definem o tamanho do padrão em largura e altura.

No exemplo anteriorwidth,heighttodos definidos como20, ou seja, o diâmetro do círculo. Portanto, os círculos se repetem uma vez após a outra, sem espaços no meio.

Neste exemplo, o width (largura) do padrão é definido como25em vez de20. Observe que agora há espaços entre os círculos horizontais5intervalo de pixels.

Também é umheightdefinido como25 Exemplo:

Abaixo está o mesmo exemplo, mas com x e y definidos como10 (Centro do círculo dentro do elemento <pattern>):

Agora, o padrão começa com um círculo completo, mas ainda há espaço vertical e horizontal adicional.

Padrão aninhado

Pode aninhar padrões de preenchimento para que o padrão de preenchimento interno use outro padrão de preenchimento. Este é um exemplo de um retângulo que usa círculos como padrão de preenchimento. Dentro do círculo, usa-se um retângulo como padrão de preenchimento.

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="innerPattern"　　　　
x="3"　y="3"　width="9" height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect x="0" y="0" width="6" height="6"　　　　
style="stroke: none; fill: #ff0000;"　/>　　　　
</pattern>　　　　
<pattern id="outerPattern"　　　　
x="12"　y="12"　width="25" height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10" style="stroke: #0000ff; fill: url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke: #000000; fill: url(#outerPattern);"　/>　　　　
</svg>

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

Como você vê, o retângulo externo agora é preenchido com círculos, e os círculos são preenchidos com retângulos.

Conversão de padrão

Pode usar funções de conversão SVG padrão para converter padrões de preenchimento. Você pode usar a propriedade patternTransform para fazer isso. Abaixo está um exemplo de conversão de padrão SVG:

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

Este exemplo define um padrão simples, que foi girado antes de ser usado como padrão de preenchimento de retângulo35Efeito de Imagem Após a Execução: