Origem de transformação SVG: gire a arte pelo centro

Para girar uma arte SVG em torno do próprio centro com CSS, coloque os traçados relacionados em um grupo e aplique transform-box: fill-box e transform-origin: center a esse grupo. Depois, aplique a rotação nele. As duas propriedades respondem a perguntas diferentes: qual retângulo fornece a referência e onde, dentro desse retângulo, fica o pivô.

Se seu ícone importado se desloca pela tela ao girar, inspecione essa referência antes de alterar as coordenadas dos traçados. Se suas partes giram separadamente, inspecione quais elementos recebem a transformação. Uma arte vetorial existente geralmente precisa de uma correção de agrupamento ou transformação; a vetorização só é útil quando você primeiro precisa de traçados editáveis a partir de uma imagem raster.

Por que apenas center ainda pode mover a arte

Para um filho SVG comum, como um traçado ou grupo, a origem de transformação padrão é 0 0. Elementos SVG raiz têm outro padrão. Com o padrão transform-box: view-box, definir a origem como center se refere à área de visualização de referência do SVG, em vez dos limites da própria arte. A referência de transform-origin em SVG da MDN explica os padrões e essas exceções.

O espaço vazio ao redor de um logo, portanto, importa. Um símbolo pequeno posicionado perto de um canto de uma grande área de desenho tem um centro diferente do centro dessa área. transform-box: fill-box muda a referência para a caixa delimitadora do objeto do elemento. Ele não recorta o SVG nem remove o espaço vazio. A referência de transform-box define as caixas disponíveis, incluindo stroke-box quando é necessária uma referência que inclua o contorno.

Gire dois traçados como uma única marca

Salve este exemplo completo como rotation.svg e abra-o em um navegador. Ele usa um quadrado original e um detalhe triangular separado, ambos posicionados longe da origem das coordenadas. O CSS fica dentro do SVG para que o arquivo independente contenha sua própria regra de rotação.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Antes da rotação, a arte combinada abrange x = 80 a 220 e y = 50 a 130. Sua caixa tem 140 unidades de largura e 80 de altura, portanto seu centro é (150, 90). O quadrado e o detalhe mantêm sua relação quando o grupo gira.

Renderizamos quatro estados de ângulo fixo desses mesmos traçados em um navegador, lemos sua geometria e reabrimos o SVG completo acima separadamente. A comparação usa áreas de visualização mais largas para deixar espaço para o resultado com origem padrão. São traçados de demonstração feitos manualmente, não uma saída de conversão do PerfectVector nem um teste de todos os navegadores e editores.

A versão com origem padrão move a marca em torno de (0, 0). As duas versões com grupo centralizado coincidem. No último painel, o quadrado gira em torno de (120, 90), enquanto o detalhe triangular gira em torno de (195, 90). Cada parte fica perto de sua própria posição inicial, mas a marca deixa de girar como um único objeto.

No seu arquivo, selecione apenas as partes que devem se mover juntas. Retângulos de fundo, marcas de registro ou traçados soltos distantes podem ampliar os limites de um grupo. O fluxo de edição de SVG aborda a inspeção e a limpeza do arquivo antes de acrescentar comportamento.

Use coordenadas explícitas quando o pivô for uma escolha de desenho

Um atributo de transformação SVG pode declarar diretamente o ângulo e o pivô. No exemplo, substitua <g class="artwork"> por <g transform="rotate(35 150 90)">. Mantenha os dois traçados dentro dele. Remover a classe também impede que a transformação CSS substitua o atributo.

A forma rotate(angle cx cy) do atributo usa graus seguidos pelo pivô no sistema atual de coordenadas do usuário. O CSS rotate(35deg) tem outra sintaxe e obtém sua origem da propriedade separada. Se tanto uma transformação CSS quanto o atributo de transformação SVG afetarem o mesmo elemento, o CSS tem prioridade. Consulte a referência do atributo transform da MDN.

Coordenadas explícitas são úteis para uma dobradiça, um ponteiro ou um pivô de logo deslocado de propósito. Mantenha-as no mesmo sistema local de coordenadas do grupo que você gira. Uma coordenada medida na tela não é automaticamente uma coordenada que você pode colar em um grupo SVG aninhado.

Se o grupo existente já tem uma transformação de posicionamento, preserve-a e coloque a rotação em um novo grupo interno que contenha a arte. Depois, teste o arquivo exportado. Substituir uma transformação existente pode descartar a translação ou escala que posicionou a marca. Se alterar a escala também desloca a marca, o exemplo de ordem de transformações SVG mostra como translação e escala se combinam.

Leia os limites antes de calcular um centro

Para um grupo simples como o deste exemplo, o cálculo do centro é:

cx = x + width / 2
cy = y + height / 2

Na nossa medição no navegador, getBBox() no grupo retornou x: 80, y: 50, width: 140 e height: 80. Sua própria rotação não alterou esses valores locais da caixa. A documentação de getBBox distingue esses valores no espaço do usuário de getBoundingClientRect(), cujo retângulo é relativo à área de visualização do navegador.

Para contornos de seleção ou um viewBox ajustado, o fluxo de caixa delimitadora SVG mostra como converter entre esses sistemas de coordenadas e conferir as margens do contorno.

Meça o elemento que você pretende girar. Transformações dos filhos podem afetar os limites do grupo que os contém: nosso grupo com filhos girados separadamente tinha limites diferentes dos do par original. Um elemento envolvente, uma escala aninhada ou uma forma solta merece inspeção antes de você reutilizar os números simples acima.

O centro da caixa nem sempre é o centro visual

O quadrado deste exemplo ocupa muito mais área que seu detalhe triangular. O ponto médio da caixa combinada ainda fica a meio caminho entre as bordas esquerda e direita mais distantes. Essa é uma regra geométrica; ela não avalia se o desenho parece equilibrado enquanto gira.

Comece com o centro da caixa, inspecione a marca em vários ângulos e passe para um pivô explícito se o desenho exigir. Um ponteiro de relógio geralmente precisa de seu ponto de fixação. Um logo com um detalhe fora do centro pode precisar de um centro escolhido pelo designer. Mantenha essa decisão separada da correção de uma origem acidental baseada na área de visualização.

A rotação também precisa de espaço. Uma exportação com limites muito próximos da arte sem rotação pode cortar cantos depois que ela gira. Deixe espaço suficiente na área de visualização e inspecione qualquer recorte no elemento pai. Se o arquivo inteiro é importado na escala errada, use o diagnóstico de tamanho SVG antes de alterar partes individuais.

Esse fluxo gira uma forma existente sem reescrever seu contorno. Se seu objetivo é transformar um contorno em outro, o guia de morph em SVG aborda o problema separado de compatibilizar a geometria dos traçados.

Prepare a arte original antes de definir o pivô

Se seu ícone existe apenas como PNG ou JPG e você precisa editar suas formas separadas, o PerfectVector pode ajudar a preparar uma versão candidata em SVG. Converta a arte para vetor, inspecione sua silhueta e os detalhes separados e agrupe as partes que devem girar juntas. Confira se há formas de fundo indesejadas antes de medir o grupo.

Um bitmap pode girar inteiro sem vetorização. Use a vetorização quando a geometria editável fizer parte do trabalho. Se você já tem um mestre vetorial utilizável, mantenha-o; mudar a origem de transformação não repara um contorno danificado, e vetorizar uma cópia raster acrescenta uma etapa desnecessária de reconstrução.

Antes de entregar o arquivo, reabra o SVG exato no destino. Confirme que as partes pretendidas giram juntas, que o pivô permanece onde você escolheu e que a arte girada tem espaço. Guarde um mestre inalterado para edição posterior. Os artigos do blog sobre fluxos de SVG abordam verificações relacionadas de preparação e exportação.

Perguntas frequentes

Por que transform-origin: center gira meu SVG em torno da tela? Para um filho SVG que usa a referência padrão view-box, center se refere à área de visualização de referência do SVG. Defina transform-box como fill-box no elemento que você pretende girar se quiser usar sua caixa delimitadora do objeto.

Devo girar o grupo ou cada traçado? Gire o grupo quando as partes devem se mover como uma única marca. Aplicar fill-box e center a cada traçado dá a cada parte seu próprio pivô, o que muda sua disposição combinada.

O centro fill-box faz um logo assimétrico parecer equilibrado? Ele seleciona o centro da caixa delimitadora do objeto. O equilíbrio visual pode exigir outro pivô; por isso, inspecione o logo em vários ângulos e escolha coordenadas explícitas quando necessário.

Fontes

1. MDN — transform-origin em SVG — Define os padrões da origem SVG, as exceções do elemento raiz e a relação com a caixa de referência.
2. MDN — transform-box — Define as caixas de referência do objeto, do contorno e da área de visualização.
3. MDN — transform em SVG — Documenta as coordenadas explícitas de rotação, as transformações de grupo e a precedência do CSS.
4. MDN — getBBox — Explica as medições de geometria local e sua diferença em relação aos retângulos da área de visualização.

Precisa de formas editáveis a partir de uma imagem raster? Prepare um SVG com o PerfectVector, inspecione as partes recuperadas, agrupe-as e confira o pivô escolhido no arquivo final exportado.