Transformação de padrão SVG: gire a pintura, não a forma

Para girar um padrão SVG dentro de uma forma fixa, coloque patternTransform="rotate(...)" no elemento pattern. Mantenha a transformação da própria forma inalterada. Para deslocar onde a arte repetida aparece, use uma translação nesse mesmo padrão.

Essas edições movem o sistema de coordenadas da pintura. Girar um grupo que contém a forma também move sua geometria exibida. Nosso emblema vazado original deixa a diferença visível: o contorno continua em pé quando a pintura gira, enquanto um controle separado do objeto inteiro inclina o emblema e sua abertura.

Escolha o elemento que deve se mover

A referência atual de patternTransform descreve uma lista de transformações aplicada ao bloco do padrão. A definição de padrões SVG2 explica os sistemas de coordenadas do bloco e a transformação da pintura.

Neste exemplo, o motivo é uma pequena marca dobrada assimétrica repetida dentro de um bloco de 24 unidades. A forma que recebe a pintura é outro caminho: um emblema assimétrico com abertura retangular. Separar esses papéis esclarece a decisão de edição.

Usamos o atributo SVG diretamente. A nota da MDN sobre implementação de transformações CSS não promete que uma propriedade CSS chamada pattern-transform funcione no seu destino.

Gire a pintura dentro do contorno

Abra um exemplo completo de rotação da pintura

Salve este SVG como pattern-emblem.svg e abra em um navegador. Ele é independente, sem imagem ou biblioteca externa. A rotação do padrão é de 30 graus em torno do ponto de origem (100,80); o grupo receptor não tem transformação.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

A regra de preenchimento evenodd deixa o retângulo interno aberto. Veja a referência de fill-rule para a regra baseada em cruzamentos. A abertura pertence ao caminho do emblema, portanto girar a pintura repetida não gira essa abertura.

Tanto patternUnits quanto patternContentUnits são explícitos nesta origem. A referência de patternUnits define o sistema de coordenadas do bloco. Nosso guia de unidades de padrão cobre dimensões do bloco e coordenadas do motivo em detalhes. Aqui os mantemos fixos para isolar a transformação; não é uma receita para criar uma repetição sem emendas.

Compare rotação, translação e um controle de geometria

Faça três cópias do exemplo e mude somente o atributo indicado:

1. Para a pintura original, remova patternTransform do padrão.
2. Para pintura deslocada, substitua por patternTransform="translate(7 5)".
3. Para o controle do objeto inteiro, remova a transformação do padrão e adicione transform="rotate(20 100 80)" ao elemento receptor g.

A cópia transladada mantém a orientação do motivo, mas muda onde ele cai dentro do emblema. Uma marca no limite pode entrar ou sair da forma pintada. A cópia girada gira o motivo e sua grade de repetição juntos; não está apenas girando cada motivo em torno do próprio centro.

Para o controle do objeto, a referência do atributo transform documenta rotação em torno de um ponto escolhido. Essa transformação muda a exibição da geometria do grupo. Sua pintura comum de padrão acompanha o movimento; unidades de padrão no espaço de usuário não tornam a pintura deste exemplo globalmente estacionária.

Comece com uma transformação ao diagnosticar o resultado. Se depois combinar rotação, translação e escala, confira a ordem no guia de ordem de transformações SVG. Combinar transformações introduz outra questão de coordenadas que esta comparação controlada evita.

Verifique geometria e pixels separadamente

Renderizamos as quatro variantes originais no Chrome a 200×160 e 400×320 pixels CSS. A razão de pixels do dispositivo era 2. Cada origem também foi decodificada e desenhada em um canvas cujas dimensões internas correspondiam ao tamanho de teste, permitindo ler seus pixels independentemente da captura.

Cada arquivo contém a mesma string d do emblema e o mesmo caminho de motivo: dois elementos de caminho e nenhum de imagem. Os hashes completos dos arquivos diferem porque as transformações diferem. A caixa geométrica local do emblema é (30,25,140,110) em todos os casos.

Essa caixa local sozinha não captaria a mudança do objeto inteiro. Para este emblema poligonal, também transformamos seus cinco vértices externos pela matriz real do navegador e medimos sua extensão exibida. A tabela normaliza a viewport maior de volta às unidades de origem:

As extensões normalizadas coincidiram nos dois tamanhos testados. O controle do objeto mantém a mesma string d, mas sua geometria exibida muda. Portanto, a igualdade dos dados de origem é evidência útil de preservação da construção do caminho, mas insuficiente para provar que o contorno visível ficou parado.

Nas variantes só de pintura, os buffers completos de pixels do canvas diferiram do original em cada tamanho. No ponto de origem (45,45), a amostra original era o fundo do bloco (244,240,228) e a amostra de pintura girada era o motivo terracota (193,90,56), ambas com alfa 255. A translação não mudou essa amostra específica, embora seu buffer geral fosse diferente. Um ponto amostrado sozinho pode não detectar um deslocamento de pintura.

Na origem (85,80), a abertura tinha alfa zero nos oito casos. Os limites de pixels totalmente opacos também ficaram inalterados nas três variantes em pé em cada tamanho; esses limites de pixels com limiar não são a mesma medida das extensões exatas dos vértices do contorno. Essas observações se limitam à nossa origem criada e ao navegador, não são um certificado de compatibilidade entre renderizadores.

Confira o destino salvo antes da entrega

Mantenha o emblema original como referência geométrica e preserve o tratamento de pintura em uma cópia separada. Um servidor de pintura repetida não transforma cada motivo visível em uma forma independente selecionável por uma máquina de corte ou editor posterior. Se o destino exige geometria expandida, prepare e examine essa expansão separadamente. O guia de edição SVG cobre mudanças mais amplas na origem.

Se o contorno girar inesperadamente, examine seu próprio grupo e as transformações dos ancestrais antes de ajustar o padrão. Se várias cópias inline compartilharem um tratamento sem intenção, dê nomes únicos aos IDs dos padrões e às referências de preenchimento correspondentes. Nosso arquivo de comparação isola esses IDs; arquivos SVG independentes separados não compartilham esse espaço de nomes de recursos do documento.

Se seu motivo ou emblema personalizado existe só como PNG ou JPG e você precisa de contornos editáveis, prepare um SVG com o PerfectVector, examine o contorno e a abertura e mantenha um original limpo. Depois crie a repetição e escolha sua transformação de pintura no código SVG. A vetorização prepara a arte; não projeta a repetição, escolhe sua fase ou garante o tratamento de padrões no destino. Caminhos limpos existentes podem ir direto à edição de padrões; o guia de vetorização explica quando converter raster é útil.

Perguntas frequentes

patternTransform muda os dados do caminho do emblema? Ele transforma a pintura do padrão neste exemplo. A string d do emblema permanece inalterada. Examine também o grupo receptor e as transformações dos ancestrais, pois a geometria exibida pode se mover sem mudar d.

Posso deslocar um padrão sem girá-lo? Sim. A variante translate(7 5) desloca a pintura preservando a orientação do motivo. Mantenha as dimensões do bloco e a geometria receptora fixas ao testar o efeito.

Por que o padrão também gira quando giro o grupo inteiro? A transformação do grupo muda a geometria receptora exibida e sua pintura. É outra operação, diferente de colocar uma transformação somente no elemento pattern.

Os motivos repetidos são caminhos editáveis separados? Nossa origem tem um caminho de motivo em um servidor de pintura e um caminho receptor do emblema. As repetições visíveis não são elementos de caminho criados separadamente; expanda e examine à parte se o destino exigir essa forma.

Fontes

1. MDN — patternTransform — Listas de transformações de padrão e nota de implementação do atributo.
2. W3C — Padrões SVG2 — Sistemas de coordenadas dos blocos e transformação da pintura.
3. MDN — fill-rule — A abertura par-ímpar no caminho receptor.
4. MDN — transform — Rotação aplicada à geometria exibida do grupo.
5. MDN — patternUnits — O sistema explícito de coordenadas do bloco mantido fixo nesta comparação.