Transformaciones

facebook-svg gplus-svg twitter-svg

Con el atributo transform podemos transformar las imágenes ( formas geométricas, trazados, imágenes. . .) dibujadas en el lienzo SVG. Las trasformaciones disponibles en SVG incluyen trasladar con translate, redimensionar con scale,  girar con rotate  y sesgar con skewX y skewY. Además podemos hacer transformaciones a medida utilizando una matriz ( matrix ) de transformación.

Trasladar con translate

Para trasladar objetos utilizamos translate, que toma dos parámetros: tx y ty.

transform="translate(tx,ty)"

El parámetro tx recoge el desplazamiento horizontal de la capa mientras que el parámetro ty recoge el desplazamiento vertical de la misma. Si ty no esta especificado el SVG considera que ty = 0.

En el siguiente ejemplo el segundo rectángulo aparece desplazado hacia la izquierda ( tx = 30 ) i abajo ( ty = 20 ), relativamente a su posición original ( el primer rectángulo ). De hecho lo que se desplaza no es el rectángulo en si, sino toda la capa que lo contiene.



   
   
   
   

Girar con rotate

Para girar objetos en SVG utilizamos rotate.

transform="rotate(a cx cy)"

donde a es el ángulo de rotación en grados sexagesimales, y cx y cy son las coordenadas del centro de rotación. Si no especificamos los parámetros cx y cy SVG considera que la rotación se hace alrededor del origen del lienzo SVG, o sea la esquina izquierda arriba de este. Exactamente como en el caso de translate, lo que gira no es el rectángulo en si, sino toda la capa que lo contiene.

En el siguiente ejemplo giramos el segundo rectángulo 25° en el sentido del reloj. No especificamos los parámetros cx y cy, y por lo tanto el rectángulo gira alrededor del origen del lienzo.



  
  
  
  

Si queremos que el rectángulo gire alrededor de otro punto, por ejemplo su esquina izquierda tenemos que especificar estas coordenadas.

transform="rotate(25 75 50)"

En el siguiente ejemplo giramos el segundo rectángulo 25° en el sentido del reloj. La rotación pasa alrededor del punto cuyas coordenadas son cx = 75 y cy = 50.



   
   
   
   

El ángulo puede tomar valores negativas para una rotación en el sentido contrario del reloj.

transform="rotate(-25 175 50)"


  
  
  
  

Redimensionar con scale

Para redimensionar objetos en SVG utilizamos el método scale().

transform="scale(sx sy)"

Con scale podemos reducir o ampliar a escala el dibujo actual, donde sx representa la escala horizontal, y sy la escala vertical. Por ejemplo: si sx = 0.6 la anchura se verá reducida a un 60% de su valor inicial.



  
  
  
  

Cuando redimensionamos con scale, el borde del objeto redimensionado es redimensionado también. Para guardar la misma anchura del borde en los objetos SVG redimensionados utilizamos la propiedad vector-effect

vector-effect="non-scaling-stroke"

Posibles valores para vector-effect: non-scaling-stroke | none | inherit

¡OJO!: vector-effect puede ser utilizado como atributo del elemento SVG o en el CSS como propiedad y tiene efecto solo en los siguientes elementos: <circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> <tspan>, y <use>.
Esto quiere decir que no podemos utilizar vector-effect como atributo de un grupo <g> de elementos o de un símbolo <symbol>, o de un elemento <svg>.



  
  
  
  

Si sy = 2, la altura aumentara a 200% de su valor inicial.



  
  
  
  

Sesgar con skewX y skewY

Para deformar objetos en el SVG utilizamos las trasformaciones skewX  ( sesgar horizontalmente ) y skewY ( sesgar verticalmente ).  Tanto skewX como skewY toman como parámetro el ángulo de deformación.

transform="skewX(a1) skewY(a2)"

En el siguiente ejemplo todas las coordenadas del el eje x son "empujadas" unos 10° ( sexagesimales ) hacia la derecha, mientras que las coordenadas del eje y quedan sin cambiar.



  
  
  
  

En este otro ejemplo tanto las coordenadas del eje x como del eje y son empujadas hacia la derecha y hacia abajo respectivamente.