Início / coding / Perguntas / 79542869
Accepted
Dem Pilafian
Asked: 2025-03-29 14:26:24 +0800 CST

Forçar o padrão de preenchimento SVG a ser relativo ao contêiner retangular

  • 772

<rect>Para um contêiner SVG , um fillfundo criado com a <pattern>tag parece começar em relação à visão geral.

Qual é a maneira mais limpa de fazer o <pattern>início em relação ao <rect>contêiner?

O objetivo é conseguir ter múltiplos <rect>contêineres reutilizando um <pattern>de modo que cada contêiner seja renderizado com o mesmo plano de fundo começando no canto superior esquerdo do contêiner. Abaixo está um exemplo SVG com dois <rect>contêineres preenchidos com bolinhas de gude.

SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="50" height="50"
         patternUnits="userSpaceOnUse">
         <circle cx="25" cy="25" r="22" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect x="10" y="10"  width="150" height="100" fill="url(#marbles)"/>
   <rect x="90" y="120" width="250" height="100" fill="url(#marbles)"/>
</svg>

Produção real:
Produção real

O fillplano de fundo ignora os atributos xe ydo rectcontêiner.

Saída desejada:
Saída desejada

Experimente o código:
https://jsfiddle.net/pilafmon/b5edq3go/

svg

1 respostas

  1. Best Answer

    Use uma transformação para posicionar os elementos retângulos em vez de x e y.

    <?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="50" height="50"
         patternUnits="userSpaceOnUse">
         <circle cx="25" cy="25" r="22" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect transform="translate(10,10)" width="150" height="100" fill="url(#marbles)"/>
   <rect transform="translate(90,120)" width="250" height="100" fill="url(#marbles)"/>
</svg>

    • 3

relate perguntas