> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Transformação de padrão SVG: gire a pintura, não a forma > Gire ou desloque pintura SVG repetida dentro de um emblema fixo com patternTransform. Compare a rotação do objeto inteiro e verifique origem, geometria e pixels. Source: https://perfectvector.com/pt-BR/blog/svg-pattern-transform Language: pt-BR Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) descreve uma lista de transformações aplicada ao bloco do padrão. A [definição de padrões SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) 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. | Mudança desejada | Local do atributo | O que examinar | | ------------------------------------------------ | --------------------------- | ------------------------------------ | | Girar o campo de motivos repetidos | patternTransform em pattern | Direção do motivo e grade dos blocos | | Deslocar a posição dos motivos dentro do emblema | patternTransform em pattern | Fase no contorno e na abertura | | Girar o emblema inteiro | transform no grupo | Contorno exibido, abertura e limites | 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** ![Comparação conceitual de um emblema vazado em pé com motivos geométricos repetidos antes e depois de girar a pintura dentro do contorno fixo](https://perfectvector.com/blog/svg-pattern-transform/fixed-outline-paint.webp) *Ilustração: mude a pintura repetida preservando o contorno que a recebe. Os arquivos SVG originais e controles medidos no navegador abaixo fornecem a evidência real de geometria e pixels.* ## 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 ``` A regra de preenchimento `evenodd` deixa o retângulo interno aberto. Veja a [referência de fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) define o sistema de coordenadas do bloco. Nosso [guia de unidades de padrão](https://perfectvector.com/pt-BR/blog/svg-pattern-units) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://perfectvector.com/pt-BR/blog/svg-transform-order). 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: | Variante | Transformação do padrão | Transformação do grupo | Extensão externa exibida x,y,largura,altura | | ---------------- | ----------------------- | ---------------------- | ------------------------------------------- | | Original | nenhuma | nenhuma | 30,25,140,110 | | Girar pintura | rotate(30 100 80) | nenhuma | 30,25,140,110 | | Deslocar pintura | translate(7 5) | nenhuma | 30,25,140,110 | | Girar objeto | nenhuma | rotate(20 100 80) | cerca de 15.41,4.38,155.50,140.99 | 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](https://perfectvector.com/pt-BR/blog/how-to-edit-an-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](https://perfectvector.com/pt-BR/image-to-vector), 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](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternTransform) — Listas de transformações de padrão e nota de implementação do atributo. 2. [W3C — Padrões SVG2](https://www.w3.org/TR/SVG2/pservers.html#Patterns) — Sistemas de coordenadas dos blocos e transformação da pintura. 3. [MDN — fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — A abertura par-ímpar no caminho receptor. 4. [MDN — transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform) — Rotação aplicada à geometria exibida do grupo. 5. [MDN — patternUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/patternUnits) — O sistema explícito de coordenadas do bloco mantido fixo nesta comparação. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-pattern-transform) - [SVG.js: importe arte, edite um caminho e exporte SVG](https://perfectvector.com/pt-BR/blog/svgjs-import-export-artwork.md) - [Comandos relativos em SVG: acompanhe o ponto atual](https://perfectvector.com/pt-BR/blog/svg-relative-path-commands.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)