Podemos crear animaciones de elementos SVG en HTML5, las animaciones se ejecutan en un tiempo y pueden cambiar alguna propiedad del elemento en cuestión.
Etiqueta <animate>
La etiqueta <animate> contiene la animación propiamente dicha, mediante atributos podemos establecer las características de la animación. Por otro lado la etiqueta <animate> irá dentro del elemento SVG que deseamos animar.
Por ejemplo, si deseamos poner animación a un elemento SVG de rectángulo, entonces la etiqueta <animate> irá de la siguiente manera:
<svg> <rect> <animate /> </rect> </svg>
Atributos para <animate>
- atributeName.- sirve para establecer el atributo o característica del elemento, que queremos animar. puede ser la posición en X o Y, o quiza el color, etc.
- from.- permite indicar el punto, estado o valor inicial la animación.
- to.- nos permite indicar el valor o estado final de la animación.
- fill.- nos permite establecer lo que ocurre después de terminar la animación; el valor remove, remueve la animación, y freeze mantiene el estado final.
- repeatCount.- para indicar la cantidad de veces que se repite la animación, el valor puede ser un numero entero o si prefieres puedes poner el valor undefined para que sea indefinido.
Ejemplos de animación SVG
Ejemplo 1.- Nuestro primer ejemplo consiste en hacer que un circulo SVG cambie de posición en dirección Horizontal (X) desde el extremo 0 hasta 400px en sentido horizontal.
<svg width="1000" height="250">
<circle cx="120" cy="150" r="80" fill="red">
<animate attributeName="cx" from="0" to="300"
dur="4s" fill="freeze" repeatCount="3"/>
</circle>
</svg>
Nuestra animación indica de que el atributo a animar o modificar es el CX o el centro en X, desde la posición 0 hasta la posición 300 en X, la duración es de 4 segundos y debe repetirse 3 veces y mediante la propiedad fill dentro de estamos indicando que al final de todo, se quede en posición final de la animación.
Ejemplo 2.- en este ejemplo haremos que el color de relleno de un rectángulo cambie desde un rojo (from=»red») a un azul, en un tiempo de 5 segundos (dur=»5s») y que se repita 4 veces (repeatCount=»4″).
<svg width="400" height="250">
<rect width="150" height="150" fill="green">
<animate attributeName="fill" from="red" to="blue"
dur="5s" fill="remove" repeatCount="4"/>
</rect>
</svg>
En este caso removeremos la animación (fill=»remove») cuando haya terminado, de tal manera que al final, nuestro rectángulo quede con su color original, en este caso el verde (green).