Matriz de transformación – ejemplos de código SVG

Una matriz de transformación SVG expresa traslación, escalado, rotación e inclinación como una única transformación matrix(a,b,c,d,e,f). Es útil cuando varias transformaciones deben combinarse, calcularse o exportarse desde herramientas gráficas. Si solo necesitas mover, redimensionar o rotar de forma simple, las funciones separadas de Transformaciones SVG suelen ser más legibles.

En este artículo aprenderás a:

Leer los seis valores de matrix(a,b,c,d,e,f).
Usar valores de matriz para traslación, escalado, rotación e inclinación.
Escalar o rotar alrededor de un punto pivote elegido.
Evitar errores comunes de matriz relacionados con origen, orden y valores de skew.
Elegir entre funciones transform legibles y una matriz calculada.

Conceptos básicos de la matriz de transformación

La matriz de transformación SVG es una matriz 3 × 3 que combina traslación, escalado, rotación e inclinación. En la sintaxis SVG matrix(a,b,c,d,e,f) solo se escriben los primeros seis valores: La matriz de transformación es 3x3

Parámetro	Uso típico	Símbolo SVG
a	Factor de escala en el eje X o valor coseno del ángulo de rotación	`sx` / `cos(α)`
b	Factor de inclinación en el eje Y o valor seno del ángulo de rotación	`tan(α)` / `sin(α)`
c	Factor de inclinación en el eje X o valor seno negativo del ángulo de rotación	`tan(α)` / `-sin(α)`
d	Factor de escala en el eje Y o valor coseno del ángulo de rotación	`sy` / `cos(α)`
e	Traslación en el eje X	`tx`
f	Traslación en el eje Y	`ty`

La matriz transforma un punto (x prev, y prev) en (x new, y new):

Fórmula para calcular coordenadas con la matriz de transformación

Los elementos SVG usan el atributo transform con la sintaxis de matriz. Es decir, proporcionas 6 valores a la función de transformación matricial para definir traslación, escalado, rotación e inclinación:

transform="matrix(a,b,c,d,e,f)"

Cómo usar una matriz de transformación SVG

Empieza con la matriz identidad: matrix(1 0 0 1 0 0).
Cambia e y f para trasladar un elemento por tx y ty.
Cambia a y d para escalar en el eje x y en el eje y.
Usa valores seno y coseno en a, b, c y d para rotar.
Usa b o c para inclinar, según el eje.
Ajusta e y f cuando escales o rotes alrededor de un pivote que no sea (0,0).

Matriz de traslación

La traslación es una transformación SVG que mueve todos los puntos de un objeto la misma distancia a lo largo de líneas paralelas. Esta transformación desplaza el origen del sistema de coordenadas del elemento. La matriz de traslación se ve así:

Fórmula de matriz de traslación

matrix(1,0,0,1,tx,ty)

La matriz de traslación combina los valores tx y ty para mover un elemento horizontal y verticalmente. Desplaza el objeto tx en el eje x y ty en el eje y.

Observa el ejemplo con el círculo azul original trasladado en el eje x (rojo), en el eje y (naranja) y en ambos ejes (verde):

 1<svg viewBox="0 0 200 200" 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 (tx = 30) -->
 6        <circle cx="15" cy="15" r="10" stroke="red" transform="matrix(1 0 0 1 30 0)" />
 7        <!-- vertical translation (ty = 25) -->
 8        <circle cx="15" cy="15" r="10" stroke="orange" transform="matrix(1 0 0 1 0 25)" />
 9        <!-- both horizontal and vertical translation (tx = 30, ty = 25) -->
10        <circle cx="15" cy="15" r="10" stroke="green" transform="matrix(1 0 0 1 30 25)" />
11    </g>
12</svg>

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

x(new) = a·x(prev) + c·y(prev) + e = x(prev) + tx
y(new) = b·x(prev) + d·y(prev) + f = y(prev) + ty

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 tres copias trasladadas:

Cuatro círculos como ilustración de una transformación de traslación

Matriz de escalado

El escalado es una transformación SVG que agranda o reduce un objeto mediante un factor de escala. Una matriz de escalado se usa para escalar objetos de forma uniforme o no uniforme a lo largo de los ejes. sx y sy son los factores de escala para los ejes x e y. Si son mayores que 1, el objeto se amplía; si están entre 0 y 1, se reduce. Si los factores son distintos, la escala no es uniforme y el objeto se estira o encoge. La matriz de escalado es:

Fórmula de matriz de escalado

matrix(sx,0,0,sy,0,0)

Mira el ejemplo con el rectángulo azul original que escala de forma uniforme y no uniforme respecto al origen (0, 0), figuras a y b, y escala de forma uniforme respecto al punto (10, 10), figura c:

 1<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
 2	<!-- uniform scale is shown in fig.a -->
 3	<g fill="none">
 4	    <rect x="10" y="10" width="20" height="20" stroke="blue" />  
 5		 <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5,0,0,1.5,0,0)" />
 6		 <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2,0,0,2,0,0)" />
 7		 <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7,0,0,0.7,0,0)" />
 8	 </g>
 9	 <!-- non-uniform scale is shown in fig.b -->
10	 <g transform="translate(70)">
11		<rect x="10" y="10" width="20" height="20" fill="blue" />  
12		<rect x="10" y="10" width="20" height="20" fill="red" transform="matrix(1.5,0,0,2,0,0)" />
13		<rect x="10" y="10" width="20" height="20" fill="orange" transform="matrix(3,0,0,2.5,0,0)" />
14		<rect x="10" y="10" width="20" height="20" fill="green" transform="matrix(0.7,0,0,0.5,0,0)" />
15	 </g>
16	 <!-- uniform scale relative to point (10, 10) is shown in fig.c -->
17	 <g fill="none" transform="translate(170)">
18	    <rect x="10" y="10" width="20" height="20" stroke="blue" />
19	    <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5,0,0,1.5,-5,-5)" />
20	    <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2,0,0,2,-10,-10)" />
21	    <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7,0,0,0.7,3,3)" />
22	 </g>
23</svg>

Imagen resultante:

Cuatro rectángulos como ilustración de una transformación de escalado

El código anterior usa la matriz de escalado. El primer grupo muestra escalado uniforme (fig. a), el segundo muestra escalado no uniforme (fig. b), y el tercero muestra escalado uniforme alrededor del punto (10, 10) (fig. c).

Nota: El escalado se realiza respecto al origen del sistema de coordenadas (0, 0). Si el objeto SVG no está situado en el origen, el escalado también puede desplazar su posición visible. Por eso los rectángulos de las figuras a y b parecen moverse.

Para escalar alrededor de un pivote específico (cx, cy), necesitas aplicar un desplazamiento adicional a la forma escalada para mantenerla en el pivote (fig. c). La matriz completa que combina traslación y escalado es:

matrix(sx,0,0,sy,cx·(1-sx),cy·(1-sy))

Esta matriz escala correctamente el objeto alrededor del punto pivote (cx, cy) sin traslación visual adicional. Los coeficientes cx·(1-sx) y cy·(1-sy) gestionan la traslación necesaria para que el objeto permanezca en su posición original después del escalado.

Matriz de rotación

La matriz de rotación usa el seno y el coseno del ángulo de rotación:

Fórmula de matriz de rotación

matrix(cos(α),sin(α),-sin(α),cos(α),0,0), donde α es el ángulo alrededor del punto con coordenadas (0, 0) del sistema inicial.

El ejemplo muestra el rectángulo azul inicial rotado 90° (verde), 180° (gris), 270° (teal), -45° (rojo) y 135° (naranja):

 1<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<!-- rotation around point with coordinates (0, 0) is shown in fig.a -->
 3    <g>
 4	  <rect x="0" y="0" width="20" height="20" fill="blue" />
 5	  <rect x="0" y="0" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,0,0)" />
 6	  <rect x="0" y="0" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,0,0)" />
 7	  <rect x="0" y="0" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,0)" />
 8	  <rect x="0" y="0" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,0,0)" />
 9	  <rect x="0" y="0" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,0,0)" />
10	<!-- rotation around point with coordinates (0, 0) is shown in fig.b -->
11    </g>
12	<g transform="translate(70)">
13	  <rect x="5" y="5" width="20" height="20" fill="blue" />
14	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,0,0)" />
15	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,0,0)" />
16	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,0)" />
17	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,0,0)" />
18	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,0,0)" />
19	</g>
20    <!-- rotation around point with coordinates (5, 5) is shown in fig.c -->
21	<g transform="translate(140)">
22	  <rect x="5" y="5" width="20" height="20" fill="blue" />
23	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,10,0)" />
24	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,10,10)" />
25	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,10)" />
26	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-2,5)" />
27	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,12,5)" />
28	</g>
29</svg>

Nota: Un ángulo positivo produce rotación horaria; un ángulo negativo produce rotación antihoraria.

El resultado de la rotación SVG se ve en la figura:

Seis rectángulos como ilustración de una transformación de rotación

Fig. a muestra el caso en que la esquina superior izquierda del rectángulo azul (0, 0) coincide con el origen del sistema (0, 0).
Fig. b muestra el caso en que el rectángulo azul empieza en (5, 5), lejos del origen. Los ejes globales x-y se aplican a las tres figuras, y los ejes rojos x’-y’ muestran el sistema tras una rotación antihoraria de 45 grados (α=-45°).
Fig. c muestra rotación alrededor del punto (5, 5) del rectángulo, por lo que el pivote sigue al rectángulo en lugar del origen global.

Nota: La siguiente matriz rota el objeto alrededor del punto pivote (cx, cy):

matrix(cos(α), sin(α), -sin(α), cos(α), cx·(1-cos(α))+cy·sin(α), cy·(1-cos(α))-cx·sin(α))

Matriz de inclinación

La inclinación es una transformación que rota uno de los ejes del sistema de coordenadas del elemento cierto ángulo α, en sentido horario o antihorario. Los elementos SVG pueden inclinarse con matrices de skew:

Fórmula de matriz skew para transformación sobre el eje x

matrix(1,0,tan(α),1,0,0) – Esta matriz especifica una inclinación sobre el eje x de α grados.

Fórmula de matriz skew para transformación sobre el eje y

matrix(1,tan(α),0,1,0,0) – Esta matriz especifica una inclinación sobre el eje y de α grados.

Ejemplo de círculo con transformaciones skew:

 1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<g fill="none">
 3		<circle cx="20" cy="20" r="10" stroke="blue" />
 4		<!-- skew transformation along the x-axis by α=45° -->
 5		<circle cx="20" cy="20" r="10" stroke="red" transform="matrix(1,0,1,1,0,0)" />
 6	</g>
 7	<g fill="none" transform="translate(70)">
 8		<circle cx="20" cy="20" r="10" stroke="blue" />
 9		<!-- skew transformation along the y-axis by α=45° -->
10		<circle cx="20" cy="20" r="10" stroke="orange" transform="matrix(1,1,0,1,0,0)" />
11	</g>
12</svg>

El ejemplo renderizado se ve así:

Círculo original y círculo después de aplicar una transformación skew

Nota: El ángulo α representa una inclinación en grados. Con la matriz de skew del eje x, cambian las coordenadas x y las y permanecen iguales. Con la matriz de skew del eje y, cambian las coordenadas y y las x permanecen iguales.

Errores comunes y soluciones

Problema	Causa	Solución
La transformación funciona pero el objeto se mueve inesperadamente	Las transformaciones se aplican respecto al origen `(0,0)`	Traslada el objeto al pivote deseado antes de aplicar escala o rotación
La rotación ocurre alrededor del punto equivocado	Se aplica una matriz de rotación sin traslación compensatoria	Combina traslación → rotación → traslación inversa en una sola matriz
El escalado distorsiona la posición	El escalado se aplica sin ajustar traslación	Ajusta los valores `e` y `f` o escala alrededor de un punto específico
La matriz no produce efecto visible	Los valores son incorrectos o iguales a la identidad	Verifica que difieran de `1 0 0 1 0 0`
Varias transformaciones se sobrescriben	La matriz reemplaza operaciones `transform` anteriores	Combina transformaciones en una sola matriz o aplícalas en el orden correcto
Skew inesperado	Valores `b` o `c` incorrectos	Asegúrate de que los valores de skew sean intencionales y coincidan con el ángulo deseado
Transformaciones difíciles de depurar	Los valores de matriz son poco intuitivos	Empieza con transformaciones simples, como translate y scale, y avanza gradualmente

Recetas rápidas

Hoja rápida de matriz de transformación

Objetivo	Matriz	Notas
Sin transformación, identidad	`matrix(1 0 0 1 0 0)`	Restablece todas las transformaciones
Trasladar por (tx, ty)	`matrix(1 0 0 1 tx ty)`	Mueve el objeto sin escalar ni rotar
Escalar uniformemente por s	`matrix(s 0 0 s 0 0)`	Escala respecto al origen
Escalar por (sx, sy)	`matrix(sx 0 0 sy 0 0)`	Escalado no uniforme
Escalar alrededor de (cx, cy)	`matrix(s 0 0 s cx(1-s) cy(1-s))`	Mantiene fijo el punto central
Rotar por θ alrededor del origen	`matrix(cosθ sinθ -sinθ cosθ 0 0)`	θ está en radianes
Skew horizontal por θ	`matrix(1 0 tanθ 1 0 0)`	Inclina sobre el eje x
Skew vertical por θ	`matrix(1 tanθ 0 1 0 0)`	Inclina sobre el eje y

FAQ – Matriz de transformación SVG

¿Qué significa matrix(a,b,c,d,e,f) en SVG?

matrix(a,b,c,d,e,f) es la función transform de SVG que almacena escalado, inclinación, rotación y traslación en seis valores. a, b, c y d afectan escala, skew y rotación; e y f mueven el elemento.

¿Qué es la matriz identidad en SVG?

La matriz identidad es matrix(1 0 0 1 0 0). Deja el elemento sin cambios y es un buen punto de partida para construir una matriz paso a paso.

¿Por qué una matriz mueve mi objeto inesperadamente?

Las transformaciones matriciales se aplican respecto al origen del sistema de coordenadas actual. Escalar o rotar un objeto lejos de (0,0) también puede cambiar su posición visible si e y f no compensan el punto pivote.

¿Debo usar matrix() o funciones transform separadas?

Usa funciones separadas como translate(), scale() y rotate() cuando quieras marcado SVG legible. Usa matrix() cuando los valores se calculen, vengan de una herramienta o deban combinar varias transformaciones en una sola.

Especificación y recursos relacionados

La sección de la especificación SVG sobre transformaciones define la función de matriz y la sintaxis de transformaciones relacionada.
Usa Transformaciones SVG para ejemplos legibles de translate(), scale(), rotate(), skewX() y skewY().
Abre Sistemas de coordenadas y unidades SVG para entender el sistema usado por los cálculos de matriz.
Consulta Transformaciones SVG – ejemplos en C# para ejemplos de API .NET con funciones transform y matrices.
Consulta Transformar elementos SVG en Python para ejemplos de Python via .NET que actualizan atributos transform mediante código.
Consulta Rotar SVG – ejemplos en C# y Escalado SVG – ejemplos en C# para flujos API específicos.

Transformaciones SVG básicas Rellenos y trazos en SVG