Transformaciones a medida

facebook-svg gplus-svg twitter-svg

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. transform o transform
La matriz inicial ( sin transformación alguna ) tiene este aspecto: transform
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:

a rx Redimensiona horizontalmente el dibujo. 1
b sy Sesga verticalmente el dibujo 0
c sx Sesga horizontalmente el dibujo 0
d ry Redimensiona verticalmente el dibujo 1
e mx Mueve horizontalmente el dibujo 0
f my Mueve verticalmente el dibujo 0

 

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.