Transformaciones matriciales
Las transformaciones de matriz se utilizan para escalar, trasladar, sesgar o rotar cualquier forma o grupo, o la ventana gráfica SVG completa. Los comandos de transformación son funciones que se utilizan en el atributo XML transform, en notación de texto y separadas por espacios, por ejemplo:
<g transform="translate(100,100) scale(3) rotate(-90)"> ... </g>El orden es importante. Si se llama a scale(.5) y luego a rotate(90), el resultado será diferente si se invocan en orden inverso.
En translate() y skew(), el primer parámetro es la coordenada x y el segundo, si está presente, la coordenada y. En rotate(), el primer parámetro es un ángulo en grados y los dos siguientes, si están presentes, son las coordenadas del centro de rotación (si no están presentes, el objeto rotará alrededor de 0,0 y podría desaparecer de la ventana gráfica si el ángulo es lo suficientemente grande). Para voltear un objeto, se puede escalar con valores negativos para x y/o y.
La transformación translate() se puede usar para mover grupos a diferentes posiciones. En este caso, las coordenadas x e y de cada objeto deben considerarse relativas al grupo. Al crear objetos que se tratarán como un grupo, también puede optar por posicionar todos los objetos en el origen (sin declarar las coordenadas x o y, o usar solo valores relativos al grupo) para controlar posteriormente la posición mediante translate().
También puedes aplicar transformaciones como estilos CSS, pero necesitarás usar unidades explícitas para grados y distancias, por ejemplo:
<g style="transform: translate(100px, 100px) scale (3) rotate(-90deg)"> ... </g>Considere el siguiente dibujo SVG de un par de ejes de coordenadas SVG:
<g id="coords">
<line x1="10" y1="10" x2="200" y2="10" />
<line x1="10" y1="10" x2="10" y2="150" />
<text x="200" y="20">x</text>
<text x="20" y="150">y</text>
</g>Las siguientes imágenes muestran los resultados de aplicar traducción, rotación/escala y sesgo a una imagen de los ejes de coordenadas SVG, en comparación con el objeto original (en negro):