Transformar SVG con translate, scale, rotate y skew

Las transformaciones SVG cambian cómo se muestran los elementos gráficos sin reescribir su geometría. Usa el atributo transform para mover, redimensionar, rotar o inclinar formas SVG con funciones como translate(), scale(), rotate(), skewX() y skewY(). Para la forma matricial de la misma idea, consulta Matriz de transformación.

En este artículo aprenderás a:

Mover elementos SVG con translate().
Redimensionar elementos SVG con scale().
Rotar elementos SVG alrededor del origen o de un punto elegido.
Inclinar gráficos SVG con skewX() y skewY().
Entender por qué importa el orden cuando varias funciones de transformación se encadenan.

Cómo transformar elementos SVG

Elige el elemento SVG o grupo que debe transformarse.
Añade el atributo transform a ese elemento o a un grupo padre <g>.
Usa translate(tx, ty) para mover el elemento.
Usa scale(sx, sy), rotate(angle cx cy), skewX(angle) o skewY(angle) para cambiar la geometría visible.
Encadena funciones de transformación solo cuando necesites efectos combinados y revisa bien el orden.
Usa matrix(a,b,c,d,e,f) solo cuando una matriz única sea más cómoda que funciones separadas.

Traslación SVG con `translate()`

La traslación mueve todos los puntos de un elemento la misma distancia. La función translate(tx, ty) mueve un elemento tx en el eje x y ty en el eje y. Si se omite ty, su valor predeterminado es 0.

Parámetro	Descripción
`tx`	Desplazamiento horizontal, positivo hacia la derecha y negativo hacia la izquierda
`ty`	Desplazamiento vertical, positivo hacia abajo y negativo hacia arriba

La acción de transform="translate(tx, ty)" significa cambiar las coordenadas del objeto según la fórmula:

x(new) = x(old) + tx

y(new) = y(old) + ty

Ejemplo simple:

 1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
 2    <g fill="none">
 3        <!-- no translation -->
 4        <circle cx="15" cy="15" r="10" stroke="blue" />
 5        <!-- horizontal translation -->
 6        <circle cx="15" cy="15" r="10" stroke="black" transform="translate(22)" />
 7        <circle cx="15" cy="15" r="10" stroke="red" transform="translate(44)" />
 8        <!-- both horizontal and vertical translation -->
 9        <circle cx="15" cy="15" r="10" stroke="green" transform="translate(33,13)" />
10        <circle cx="15" cy="15" r="10" stroke="yellow" transform="translate(11,13)" />
11	</g>
12</svg>

En el ejemplo, el elemento <g> agrupa los círculos y fill="none" se aplica a todos los círculos del grupo. La imagen muestra el círculo original y sus copias trasladadas ( translation.svg):

Cinco anillos olímpicos como ilustración de una transformación de traslación

Escalado SVG con `scale()`

El escalado agranda o reduce un elemento mediante un factor de escala. La función scale(sx, sy) multiplica la anchura del elemento por sx y la altura por sy. Si se omite sy, SVG usa el mismo valor que sx, por lo que el elemento escala de forma uniforme.

Parámetro	Descripción
`sx`	Factor de escala horizontal
`sy`	Factor de escala vertical opcional

 1<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
 2    <!-- uniform scale -->
 3    <circle cx="0" cy="0" r="10" fill="#B0C4DE" transform="scale(4)" />
 4    <circle cx="0" cy="0" r="10" fill="#DDA0DD" transform="scale(3)" />
 5    <circle cx="0" cy="0" r="10" fill="#FFB6C1" transform="scale(2)" />
 6    <!-- no scale -->
 7    <circle cx="0" cy="0" r="10" fill="#5F9EA0" />
 8    <g transform="translate(100)">
 9        <!-- uniform scale -->
10        <circle cx="0" cy="0" r="10" fill="#B0C4DE" transform="scale(4)" />
11        <!-- vertical scale -->
12        <circle cx="0" cy="0" r="10" fill="#DDA0DD" transform="scale(1,4)" />
13        <!-- horizontal scale -->
14        <circle cx="0" cy="0" r="10" fill="#FFB6C1" transform="scale(4,1)" />
15        <!-- no scale -->
16        <circle cx="0" cy="0" r="10" fill="#5F9EA0" />
17    </g>
18</svg>

Imagen resultante ( scaling.svg):

Cuatro círculos coloreados que ilustran escalado

El código usa scale() y translate(). El primer grupo muestra escalado uniforme, con el mismo factor en ambos ejes. El segundo grupo muestra escalado direccional: scale(1,4) estira el círculo verticalmente, mientras scale(4,1) lo estira horizontalmente.

Rotación SVG con `rotate()`

La función rotate(angle, cx, cy) rota un elemento angle grados alrededor del punto (cx, cy). Si se omiten cx y cy, SVG rota el elemento alrededor de (0, 0) en el sistema de coordenadas actual.

Parámetro	Descripción
`angle`	Ángulo de rotación en grados, positivo en sentido horario
`cx`	Coordenada X del centro de rotación opcional
`cy`	Coordenada Y del centro de rotación opcional

Los valores de ángulo para rotate o skew deben indicarse en grados; no se pueden usar otras unidades disponibles en CSS. Un ángulo positivo produce rotación horaria; uno negativo, antihoraria.

Nota: rotate(angle cx) no es válido. Si proporcionas un centro de rotación, especifica tanto cx como cy.

Igual que la traslación, la rotación no distorsiona el elemento. Conserva distancias, ángulos y líneas paralelas.

1<svg width="450" height="450" xmlns="http://www.w3.org/2000/svg">
2    <rect x="100" y="250" width="200" height="30" fill="CadetBlue" />
3    <rect x="100" y="250" width="200" height="30" fill="#DDA0DD" transform ="rotate(-45 200 265)" />
4    <rect x="100" y="250" width="200" height="30" fill="Pink" transform ="rotate(-90 200 265)" />
5    <rect x="100" y="250" width="200" height="30" fill="#B0C4DE" transform ="rotate(45 200 265)" />
6    <rect x="100" y="250" width="200" height="30" fill="CadetBlue" transform ="rotate(-35)" />
7</svg>

La función transform="rotate(-90 200 265)" rota el rectángulo rosa 90 grados en sentido antihorario alrededor de (200, 265). El último rectángulo usa rotate(-35) sin centro, por lo que SVG lo rota alrededor de (0, 0). El resultado se muestra abajo:

Cinco rectángulos rellenos que ilustran rotación SVG alrededor de un punto y del origen

El archivo de ejemplo rotation.svg contiene el ejemplo de rotación SVG.

Inclinación SVG con `skewX()` y `skewY()`

La inclinación modifica un elemento cambiando un eje de coordenadas. Usa skewX(angle) para inclinar sobre el eje x y skewY(angle) para inclinar sobre el eje y. El ángulo se especifica en grados. Con skewX(angle), las coordenadas x cambian y las coordenadas y permanecen iguales; con skewY(angle), cambian las coordenadas y y las x permanecen iguales.

Ejemplo de un círculo con skewX(55) ( skew-x.svg):

1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="20" cy="20" r="15" stroke="blue" fill="none" />
3    <circle cx="20" cy="20" r="15" stroke="grey" stroke-opacity="0.7" fill="none" transform="skewX(55)" />
4</svg>

Ejemplo simple de un rectángulo inclinado con la función skewY(35) ( skew-y.svg):

1<svg  width="800" height="800" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2   <rect x="20" y="20" width="30" height="30" stroke="blue" stroke-opacity="1" fill="none" />
3   <rect x="20" y="20" width="30" height="30" stroke="grey" stroke-opacity="0.5" fill="none" transform="skewY(35)" />
4 </svg>

Los ejemplos renderizados se ven así:

Círculo y rectángulo antes y después de aplicar las funciones skewX y skewY

Errores comunes y soluciones

Problema	Causa	Solución
El rectángulo no se mueve tras aplicar `translate`	El atributo `transform` está mal escrito o faltan comillas	Asegúrate de usar `transform="translate(150,50)"` correctamente en el elemento
La traslación no se aplica	El atributo `transform` se colocó en un padre en lugar del elemento destino	Define `transform` directamente en el elemento que quieres mover, por ejemplo `<rect>`.
Dirección de rotación inesperada	El signo del ángulo se interpreta al contrario de lo esperado	Usa valores positivos para rotación horaria y negativos para antihoraria
La rotación ocurre alrededor del punto equivocado	Se omitieron `cx`/`cy` o se usó el origen del elemento	Proporciona coordenadas explícitas del centro o aplica una traslación previa para cambiar el pivote.
La inclinación es demasiado extrema	El ángulo se indicó en radianes en lugar de grados	Proporciona ángulos en grados, por ejemplo `skewX(30)`
El elemento desaparece tras escalar	Factor de escala `0` o negativo sin intención	Usa valores de escala positivos distintos de cero y revisa el orden de transformaciones si se combinan.
Las transformaciones combinadas producen un resultado incorrecto	El orden de funciones está invertido	Recuerda que las transformaciones se aplican de derecha a izquierda; escribe `translate(...) rotate(...)` para rotar primero y trasladar después

Recetas rápidas

Efecto	Código SVG
Mover 50px a la derecha y 30px abajo	`<rect x="10" y="10" width="40" height="20" transform="translate(50,30)" />`
Duplicar tamaño de forma uniforme	`<circle cx="20" cy="20" r="10" transform="scale(2)" />`
Estirar horizontalmente 3×	`<rect x="0" y="0" width="20" height="20" transform="scale(3,1)" />`
Rotar 45° alrededor de (100,100)	`<polygon points="90,90 110,90 100,110" transform="rotate(45 100 100)" />`
Inclinar X 30°	`<rect x="10" y="10" width="30" height="30" transform="skewX(30)" />`
Encadenar mover y rotar	`<g transform="translate(100,50) rotate(30)"><rect width="40" height="10" fill="red"/></g>`

FAQ – Transformaciones SVG

¿Qué hace el atributo transform de SVG?

El atributo transform aplica una transformación geométrica a un elemento o grupo SVG. Cambia cómo se muestra el elemento, pero no reescribe atributos como x, y, cx, cy ni path data.

¿Cuál es la diferencia entre translate y scale?

translate(tx, ty) mueve un elemento sin cambiar su tamaño. scale(sx, sy) cambia el tamaño del elemento y también puede desplazar su posición visible porque el escalado se realiza respecto al origen del sistema de coordenadas.

¿Cómo roto un SVG alrededor de un punto central?

Usa rotate(angle cx cy) y proporciona ambas coordenadas del centro. Por ejemplo, transform="rotate(45 100 100)" rota el elemento 45 grados alrededor del punto (100, 100).

¿Cuándo debo usar matrix en lugar de funciones transform?

Usa funciones separadas como translate(), scale() y rotate() cuando la legibilidad importe. Usa matrix(a,b,c,d,e,f) cuando necesites una transformación combinada o valores calculados por otra herramienta o API.

Especificación y recursos relacionados

La sección de la especificación SVG sobre transformaciones define la propiedad transform y las funciones de transformación.
Usa Matriz de transformación cuando necesites la forma matricial de traslación, escalado, rotación e inclinación.
Abre SVG viewBox cuando necesites escalar, recortar o reposicionar el área visible de coordenadas en lugar de transformar elementos individuales.
Consulta Transformaciones SVG – ejemplos en C# para ejemplos de API .NET que rotan, escalan, trasladan e inclinan gráficos SVG.
Consulta Transformar elementos SVG en Python para ejemplos de Python via .NET que aplican atributos transform a elementos y grupos SVG.
Consulta Rotar SVG – ejemplos en C# y Escalado SVG – ejemplos en C# para flujos API específicos.

Texto SVG Matriz de transformación SVG