w3.unpo<code>todo

Transformaciones a medida

Con el atributo transform podemos hacer trasformaciones a medida utilizando una matriz ( matrix ) de transformación.

Transformaciones con matrix

Cada objeto en el SVG tiene una matriz de transformación. o
La matriz inicial ( sin transformación alguna ) tiene este aspecto:
El atributo transform substituye la matriz actual del objeto, por otra, y toma 6 parámetros ( a, b, c, d, e, f ). Los 6 parámetros corresponden a los 6 primeros elementos de la matriz y representan:

Un ejemplo de transformación con matrix

A continuación aplicamos esta matriz de transformación:

transform="matrix(.7,1.2,-.7,.7,130,-87)"

Las trasformaciones disponibles en SVG ( trasladar con translate, redimensionar con scale, girar con rotate y sesgar con skewX y skewY ) no son más que métodos abreviados, que nos facilitan hacer unas transformaciones que, de otra manera, se pueden hacer con matrix. Veamos como.

Trasladar con matrix

transform="matrix( 1, 0, 0, 1, mx, my)"
o lo que es lo mismo:
transform="translate( mx, my )"

Girar con matrix

transform="matrix( Math.cos( a ), Math.sin( a ), -Math.sin( a ),Math.cos( a ), 0, 0)"
o lo que es lo mismo:
transform="rotate( a )"

El JavaScript nos permite calcular el valor del atributo transform, y después, mediante el método setAttributeNS atribuir este valor al atributo transform.
Hay que tener en cuenta que el JavaScript requiere los valores de los ángulos en radianes, y por lo tanto habrá que hacer primero las transformaciones necesarias.

	var matrix = document.getElementById("matrixRotate");
	var a = (25*Math.PI)/180;
	var transform="matrix( "+Math.cos( a )+","+Math.sin( a )+","+ (-Math.sin( a ))+","+Math.cos( a )+",0,0 )";
	matrix.setAttributeNS(null,"transform",transform);

Redimensionar con matrix

transform="matrix( rx, 0, 0, ry, 0, 0)"
o lo que es lo mismo:
transform="scale( rx, ry )"

Sesgar con matrix

transform="matrix( 1, Math.tan( ay ), Math.tan( ax ), 1, 0, 0)"
o lo que es lo mismo:
transform="skewX( ax ) skewY( ay )"

El JavaScript nos permite calcular el valor del atributo transform, y después, mediante el método setAttribute atribuir este valor al atributo transform.
Hay que tener en cuenta que el JavaScript requiere los valores de los ángulos en radianes, y por lo tanto habrá que hacer primero las transformaciones necesarias.

	var matrix1 = document.getElementById("matrixSkew");
	var ax = (25*Math.PI)/180;
	var ay = (5*Math.PI)/180;
	var transform1="matrix( 1,"+Math.tan( ay )+","+ Math.tan( ax )+",1,0,0 )";
	matrix1.setAttribute("transform",transform1);

Entender las transformaciones con matrix

See the Pen SVG transform matrix by Gabi (@enxaneta) on CodePen.