Tutorial – Animaciones nativas en SVG

Si hace unos días en otro post animábamos un SVG a través de CSS con animate.css, hoy vamos a animar nativamente un SVG a través de la propiedad animateTransform.

Para animar nativamente un SVG podemos recurrir a varios métodos o propiedades, podemos ver detalladamente todas las opciones de las que disponemos para animar un SVG en la página de la W3C.

Para animar un SVG a través de animateTransform tenemos a nuestra disposición:

• translate
  
• scale
  
• rotate
  
• skewX
  
• skewY
  

Y aquí la lista de atributos y propiedades que podemos animar:

• svg
  
• g
  
• defs
  
• use
  
• image
  
• switch
  
• path
  
• rect
  
• circle
  
• ellipse
  
• line
  
• polyline
  
• polygon
  
• text
  
• clipPath
  
• mask
  
• a
  
• foreignObject
  

ROTATE

1
2
3
4
5
6
7
8
9
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 1080 50"
to="360 180 50"
dur="3s"
repeatCount="1"
begin="mouseover"
/>

La rotación del elemento puede ir de 0 a 360 grados, en este caso en el from indicaremos 0 y en to 360, así completaremos toda la rotación. El centro de la rotación estara determinado por el segundo y el tercer valor que tenemos en from y to. En dur indicaremos el tiempo que dura la animación, en este caso 3 segundos. En repeatCount indicaremos cuantas veces queremos que se repita la animación, podemos indicarle segundo y decimales, también la podemos hacer que la animación sea infinita con infinite. Por último en begin le diremos a la animación que solo se iniciara en el momento que el ratón se pose sobre los diferentes elementos que tiene la animación. También disponemos de end para indicarle a la animación cuando debe de terminar.

VER EJEMPLO!

TRANSLATE

1
2
3
4
5
6
7
8
<animateTransform attributeType="xml"
attributeName="transform"
type="translate"
from="0"
to="360"
dur="3s"
repeatCount="1"
fill="freeze"/>

En esta animación el código es casi idéntico a la anterior, solamente hemos añadido el atributo fill con un valor de freeze, con esto conseguimos parar la animación, si no definimos este atributo la animación volverá a la posición inicial.

VER EJEMPLO!

SCALE

1
2
3
4
5
6
7
8
<animateTransform attributeType="xml"
attributeName="transform"
type="scale"
from="1"
to="6"
dur="8s"
repeatCount="1"
/>

Con scale lo que conseguimos es escalar el elemento, en este caso le decimos que vaya de 1 a 6 y que la animación dure 8 segundos.

VER EJEMPLO!