Ordem de transformações SVG: escala e posição

No atributo SVG transform="translate(60 25) scale(2)", um ponto da arte original é escalado por dois e depois movido 60 unidades horizontalmente e 25 verticalmente ao ser mapeado para o sistema de coordenadas do pai. Inverta a lista para scale(2) translate(60 25), e essa translação também será dobrada. A arte tem o mesmo tamanho, mas outra posição.

Quando um logo salta de posição após ser redimensionado, confira a lista de transformações antes de editar seus traçados. Uma organização útil é um grupo externo para posicionamento e um interno para escala. As duas tarefas permanecem visíveis, e as coordenadas originais da arte ficam disponíveis para edições futuras.

Acompanhe um ponto em vez de adivinhar a ordem

Considere o ponto da arte original (10, 10). Com escala 2 e translação (60, 25), as duas listas produzem:

Os dois pontos vêm da mesma coordenada de origem. A segunda lista escala a translação e também a arte. Sua posição final difere em (60, 25) da primeira.

Você pode encontrar descrições aparentemente conflitantes sobre a ordem. A especificação SVG descreve uma lista como sistemas de coordenadas aninhados na ordem escrita: a transformação mais à esquerda se torna o grupo externo. Ao acompanhar um ponto da arte original para fora através desses grupos, a operação mais interna age primeiro sobre ele. A definição de transform do W3C mostra explicitamente o aninhamento equivalente.

Para calcular pontos, trabalhe da função mais à direita para a esquerda. Para a estrutura de grupos, leia do externo para o interno. Mantenha a interpretação escolhida consistente durante o cálculo.

Compare a mesma marca de duas peças

Salve este exemplo completo como transform-order.svg e abra-o em um navegador. Sua arte é um anel quadrado original com um detalhe triangular separado. A abertura é espaço vazio real definido pela regra de preenchimento par-ímpar.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Mude apenas o atributo do grupo para transform="scale(2) translate(60 25)". A marca se move mais para a direita e para baixo, enquanto seu tamanho e o espaço entre as peças permanecem iguais.

Renderizamos as duas listas e um equivalente de grupos aninhados em um navegador. Os painéis da comparação usam áreas de coordenadas idênticas; a marca tênue mostra a geometria original. Cada ponto vermelho marca onde o ponto da arte original (10, 10) chega.

A caixa local da arte original é x=10, y=10, width=95, height=40. A primeira organização produz limites nas coordenadas da raiz de x=80, y=45, width=190, height=80. A lista invertida produz x=140, y=70, com o mesmo tamanho 190 × 80.

Essas medições descrevem este exemplo simples sem contorno. O exemplo não tem animação nem transformação CSS. Ele demonstra composição de coordenadas, não qualidade de conversão do PerfectVector nem compatibilidade com todos os editores SVG.

Separe posicionamento e tamanho com grupos aninhados

Substitua o grupo original por esta estrutura, mantendo seus traçados iguais:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Isso equivale a translate(60 25) scale(2) em um grupo. A translação externa posiciona o sistema de coordenadas escalado. Mudar a escala interna mantém os valores de translação externos em (60, 25).

Isso não significa que todos os pontos visíveis permaneçam fixos enquanto você muda a escala. Um ponto afastado da origem local ainda se move quando suas coordenadas são multiplicadas. Decida qual ponto da arte original deve ancorar a arte antes de escolher a translação.

Por exemplo, suponha que o canto original do anel (10, 10) deva chegar a (120, 80) após escalar por 2. Calcule:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Use translate(100 60) scale(2). O canto agora é mapeado para (120, 80). Transladar diretamente por (120, 80) posicionaria a origem local ali e deixaria o canto mais à direita e abaixo.

Esse cálculo presume escala uniforme sem rotação ou inclinação. Para um pivô de rotação escolhido deliberadamente, use o guia de transform-origin SVG. Mantenha cada transformação no grupo responsável por essa tarefa, em vez de combinar correções sem relação por tentativa e erro.

Leia o mapeamento renderizado quando o arquivo tiver aninhamento

Um SVG importado pode já ter transformações em vários ancestrais. Olhar apenas o atributo do grupo mais próximo deixa de fora o efeito combinado delas. A referência de transform do MDN também observa que uma transformação CSS tem prioridade quando a propriedade CSS e o atributo de apresentação afetam o mesmo elemento. Confira os estilos calculados se mudar o atributo parecer não fazer nada.

Para um SVG embutido renderizado, este trecho mapeia o ponto do grupo escolhido para as coordenadas de usuário da raiz SVG:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

A matriz inversa da raiz remove o mapeamento compartilhado da raiz para a tela. Isso importa porque a exibição de 700 × 400 do exemplo é o dobro de seu viewBox de 350 × 200. Pixels de tela e coordenadas SVG são unidades diferentes aqui. O MDN documenta o mapeamento retornado por getScreenCTM().

Nossa comparação no navegador produziu matrix(2 0 0 2 60 25) para a primeira lista e a versão aninhada. A lista invertida produziu matrix(2 0 0 2 120 50). Neste exemplo de escala e translação, os dois últimos números deixam a translação diferente explícita.

O trecho presume transformações bidimensionais invertíveis. Uma escala zero não é adequada para essa verificação de matriz inversa. Para sobreposições, exportações ajustadas, contornos ou caixas rotacionadas, use o fluxo mais detalhado de limites SVG.

Não espere que getBBox() no grupo da arte informe a posição transformada na raiz. Seu resultado local exclui a transformação do próprio elemento e as de seus ancestrais, como explica a referência de getBBox. Uma caixa local pode permanecer igual enquanto a marca visivelmente se move.

Corrija a transformação antes de reconstruir a arte

Trabalhe em uma cópia do SVG. Identifique os traçados que devem se mover juntos e inspecione seu grupo e seus ancestrais. Registre um ponto de ancoragem reconhecível e o destino pretendido para esse ponto.

Mude uma transformação por vez. Se o tamanho estiver correto, mas o posicionamento errado, compare a translação produzida pelas duas ordens. Se as peças se moverem independentemente, coloque seu posicionamento compartilhado em um grupo que as contenha. Mantenha um pivô de rotação separado da questão da ordem de escala.

Reabra o arquivo salvo no destino e inspecione toda a extensão da marca. Uma transformação correta ainda pode mover a arte além do viewBox ou para uma região de recorte. O guia de edição SVG aborda o processo mais amplo de limpeza e exportação.

Se a marca existe apenas como PNG ou JPG e você precisa de contornos editáveis, o vetorizador de logos do PerfectVector pode preparar um candidato SVG. Inspecione sua silhueta, abertura e formas separadas, agrupe a arte recuperada e aplique transformações de posicionamento no editor ou no código.

Um bitmap pode ser movido e escalado sem vetorização. Use a vetorização por traçado quando precisar de formas editáveis e preserve um original vetorial existente quando tiver um. Para geometria ou letras exatas de logo, uma reconstrução manual ainda pode ser necessária; o guia de vetorização de logos explica como escolher esse método inicial.

Perguntas frequentes

O SVG aplica transformações da esquerda para a direita ou da direita para a esquerda? A lista corresponde a sistemas de coordenadas aninhados na ordem escrita, do externo para o interno. Ao calcular onde um ponto da arte original termina, aplique primeiro a função mais à direita e trabalhe para fora, em direção à esquerda.

Por que inverter translate e scale move o logo? Com scale seguido de translate na lista de atributos, a escala também multiplica a translação. Com translate seguido de scale, a translação fica fora dessa escala. Os mesmos valores podem, portanto, produzir tamanhos iguais em posições diferentes.

Uma translação externa mantém todos os pontos fixos quando redimensiono o grupo interno? Não. Ela mantém os valores de translação externos separados da escala interna. Pontos afastados da origem local ainda se movem ao serem escalados. Escolha um ponto de ancoragem e calcule a translação necessária para posicioná-lo.

Fontes

1. W3C — Atributo transform SVG — Define a relação entre listas de transformações e sistemas de coordenadas aninhados.
2. MDN — SVG transform — Documenta sintaxe de transformações, mapeamento de matrizes e precedência CSS.
3. MDN — getScreenCTM — Descreve a matriz usada para mapear coordenadas SVG em direção à viewport do documento.
4. MDN — getBBox — Explica limites locais e a exclusão das transformações do elemento medido.

Se o logo de origem precisar de geometria editável, prepare um candidato SVG com o PerfectVector, inspecione seus contornos e partes separadas, escolha uma âncora e verifique sua posição final após escalar.