Origen de transformación SVG: gira ilustraciones alrededor de su centro

Para girar una ilustración SVG alrededor de su propio centro con CSS, coloca los trazados relacionados en un grupo y aplica transform-box: fill-box y transform-origin: center a ese grupo. Aplica después ahí la rotación. Las dos propiedades responden a preguntas diferentes: qué rectángulo proporciona la referencia y dónde se sitúa el pivote dentro de él.

Si tu icono importado describe un arco por el lienzo, inspecciona esa referencia antes de cambiar sus coordenadas de trazado. Si sus piezas giran por separado, inspecciona qué elementos reciben la transformación. Una ilustración vectorial existente suele necesitar corregir la agrupación o la transformación; vectorizar solo es útil cuando primero necesitas trazados editables a partir de un original rasterizado.

Por qué center por sí solo puede seguir desplazando la ilustración

Para un hijo SVG normal, como un trazado o grupo, el origen de transformación predeterminado es 0 0. Los elementos SVG raíz tienen otro valor predeterminado. Con transform-box: view-box predeterminado, establecer el origen en center se refiere al área visible de referencia SVG y no a los límites de la propia ilustración. La referencia SVG de transform-origin de MDN explica tanto los valores predeterminados como estas excepciones.

Por tanto, el espacio vacío alrededor de un logotipo importa. Un símbolo pequeño situado cerca de una esquina de un área de dibujo grande tiene un centro distinto al de esa área. transform-box: fill-box cambia la referencia al cuadro delimitador del objeto del elemento. No recorta el SVG ni elimina el espacio vacío. La referencia de transform-box define los cuadros disponibles, incluido stroke-box cuando se necesita una referencia que incluya el trazo.

Gira dos trazados como una marca

Guarda este ejemplo completo como rotation.svg y ábrelo en un navegador. Usa un cuadrado original y un detalle triangular separado, ambos alejados del origen de coordenadas. El CSS está dentro del SVG para que el archivo independiente incluya su propia regla de rotación.

<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 de girar, la ilustración combinada abarca x = 80 a 220 e y = 50 a 130. Su cuadro mide 140 unidades de anchura y 80 de altura, así que su centro es (150, 90). El cuadrado y el detalle conservan su relación cuando gira el grupo.

Renderizamos cuatro estados de ángulo fijo de esos mismos trazados en un navegador, leímos su geometría y volvimos a abrir por separado el SVG completo anterior. La comparación usa áreas de visualización más amplias para dejar espacio al resultado del origen predeterminado. Son trazados de demostración creados manualmente, no una conversión de PerfectVector ni una prueba de todos los navegadores y editores.

La versión con origen predeterminado mueve la marca alrededor de (0, 0). Las dos versiones de grupo centrado coinciden. En el último panel, el cuadrado gira alrededor de (120, 90), mientras que el detalle triangular lo hace alrededor de (195, 90). Cada parte permanece cerca de su posición inicial, pero la marca ya no gira como un objeto único.

En tu archivo, selecciona solo las piezas que deban moverse juntas. Los rectángulos de fondo, marcas de registro o trazados sueltos lejanos pueden ampliar los límites de un grupo. El flujo de edición SVG cubre la inspección y limpieza del archivo antes de añadir comportamiento.

Usa coordenadas explícitas cuando el pivote sea una decisión de diseño

Un atributo de transformación SVG puede indicar directamente el ángulo y el pivote. En el ejemplo, sustituye <g class="artwork"> por <g transform="rotate(35 150 90)">. Mantén los dos trazados dentro. Eliminar la clase también evita que la transformación CSS sobrescriba el atributo.

La forma rotate(angle cx cy) del atributo usa grados seguidos del pivote en el sistema actual de coordenadas de usuario. rotate(35deg) de CSS tiene otra sintaxis y toma el origen de la propiedad independiente. Si una transformación CSS y el atributo de transformación SVG afectan al mismo elemento, CSS tiene prioridad. Consulta la referencia del atributo transform de MDN.

Las coordenadas explícitas son útiles para una bisagra, aguja o un pivote de logotipo desplazado deliberadamente. Mantenlas en el mismo sistema local de coordenadas que el grupo girado. Una coordenada medida en pantalla no es automáticamente una coordenada que puedas pegar en un grupo SVG anidado.

Si el grupo existente ya tiene una transformación de colocación, consérvala y pon la rotación en un grupo interior nuevo que contenga la ilustración. Prueba después el archivo exportado. Sustituir una transformación existente puede descartar la traslación o escala que posicionaba la marca. Si cambiar la escala también desplaza la marca, el ejemplo de orden de transformaciones SVG muestra cómo se combinan traslación y escala.

Lee los límites antes de calcular un centro

Para un grupo sencillo como el de este ejemplo, el cálculo del centro es:

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

En nuestra medición de navegador, getBBox() del grupo devolvió x: 80, y: 50, width: 140 y height: 80. Su propia rotación no cambió esos valores locales. La documentación de getBBox distingue estos valores de espacio de usuario de getBoundingClientRect(), cuyo rectángulo es relativo al área visible del navegador.

Para contornos de selección o un viewBox ajustado, el flujo de cuadros delimitadores SVG muestra cómo convertir entre esos sistemas de coordenadas y comprobar márgenes de trazo.

Mide el elemento que pretendes girar. Las transformaciones de hijos pueden afectar a los límites del grupo contenedor: nuestro grupo con hijos girados por separado tenía límites diferentes a los de la pareja original. Un envoltorio, una escala anidada o una forma suelta merecen inspección antes de reutilizar los números sencillos anteriores.

El centro de un cuadro no siempre es el centro visual

El cuadrado de este ejemplo ocupa mucha más área que su detalle triangular. El punto medio de su cuadro combinado sigue estando a mitad de camino entre los bordes más a la izquierda y más a la derecha. Es una regla geométrica; no juzga si el diseño parece equilibrado al girar.

Empieza por el centro del cuadro, inspecciona la marca a varios ángulos y pasa a un pivote explícito si el diseño lo requiere. Una aguja de reloj suele necesitar su punto de fijación. Un logotipo con un detalle descentrado puede necesitar un centro elegido por el diseñador. Mantén esa decisión separada de corregir un origen accidental basado en el área visible.

La rotación también necesita espacio. Una exportación ajustada a la ilustración sin girar puede cortar esquinas después del giro. Deja suficiente espacio en el área de visualización e inspecciona cualquier recorte del padre. Si todo el archivo se importa con escala incorrecta, usa el diagnóstico de tamaño SVG antes de cambiar piezas individuales.

Este flujo gira una forma existente sin reescribir su contorno. Si quieres convertir un contorno en otro, la guía de transformación de formas SVG cubre el problema independiente de emparejar geometría de trazados.

Prepara el original antes de establecer el pivote

Si tu icono solo existe como PNG o JPG y necesitas editar sus formas separadas, PerfectVector puede ayudar a preparar una primera versión SVG. Convierte la ilustración en vector, inspecciona su silueta y detalles separados y agrupa las piezas que deban girar juntas. Busca formas de fondo no deseadas antes de medir el grupo.

Un mapa de bits puede girar completo sin vectorizarlo. Usa vectorización cuando la geometría editable forme parte del trabajo. Si ya tienes un archivo maestro vectorial utilizable, consérvalo; cambiar el origen de transformación no repara un contorno dañado y vectorizar una copia rasterizada añade una reconstrucción innecesaria.

Antes de entregar el archivo, vuelve a abrir el SVG exacto en su destino. Confirma que las piezas previstas giran juntas, el pivote permanece donde lo elegiste y la ilustración girada tiene espacio. Conserva un archivo maestro intacto para editar después. Los artículos de flujos SVG del blog cubren comprobaciones relacionadas de preparación y exportación.

Preguntas frecuentes

¿Por qué transform-origin: center gira mi SVG alrededor del lienzo? En un hijo SVG que usa la referencia view-box predeterminada, center se refiere al área visible de referencia SVG. Establece transform-box en fill-box en el elemento que quieras girar si prefieres su cuadro delimitador de objeto.

¿Debo girar el grupo o cada trazado? Gira el grupo cuando las piezas deban moverse como una marca. Aplicar fill-box y center a cada trazado da a cada pieza su propio pivote y cambia su disposición combinada.

¿fill-box center hará que un logotipo asimétrico parezca equilibrado? Selecciona el centro del cuadro delimitador del objeto. El equilibrio visual puede requerir otro pivote, así que inspecciona el logotipo a varios ángulos y elige coordenadas explícitas cuando sea necesario.

Fuentes

1. MDN — transform-origin de SVG — Define los valores predeterminados del origen SVG, las excepciones del elemento raíz y la relación con el cuadro de referencia.
2. MDN — transform-box — Define los cuadros de referencia de objeto, trazo y área visible.
3. MDN — transform de SVG — Documenta coordenadas explícitas de rotación, transformaciones de grupo y prioridad de CSS.
4. MDN — getBBox — Explica las mediciones de geometría local y su diferencia respecto a rectángulos del área visible.

¿Necesitas formas editables de un original rasterizado? Prepara un SVG con PerfectVector, inspecciona las piezas recuperadas, agrúpalas y comprueba el pivote elegido en el archivo exportado final.