SVG no solo nos permite animar las transformaciones (utilizando animateTransform) sino que también podemos realizar animaciones sobre atributos CSS de los elementos. Concretamente con la etiqueta ‘animate’ y el tipo ‘CSS’, es decir si tenemos un rectángulo de 200x100 de color azul:
<rect width="200" height="100" style="fill:rgb(0,0,255);"/>
Podemos hacer que cambie su color a rojo, añadiendo:
<rect width="200" height="100" style="fill:rgb(0,0,255);"> <animate attributeType="CSS" attributeName="fill" to="rgb(255,0,0)" dur="3s" fill="freeze" /> </rect>
O añadiendo:
<animateColor attributeName="fill" to="red" dur="3s" fill="freeze" />
En el parámetro ‘attributeName’ se indicar el atributo a animar. Por ejemplo podemos hacer que desaparezca realizando un fade o desvanecimiento pasandos 3 segundos:
<animate begin="3s" attributeType="CSS" attributeName="fill-opacity" to="0" dur="2s" fill="freeze" />
Otra característica interesante de SVG es la posibilidad de iniciar las animaciones ante determinados eventos, donde estos pueden ser: click, mousedown, mouseup, mousemove, mouseover, y mouseout.
Por ejemplo podemos hacer que al hacer click sobre el rectángulo, este se rellene de color amarillo:
<set begin="click" attributeName="fill" to="yellow" />
Este último código se debe incluir dentro de la etiqueta rectángulo al igual que hacíamos con el ‘animate’. El elemento ‘set’ de SMIL es una forma corta de realizar un ‘animate’ con duración 0s, por tanto de esta forma cuando se produzca un click sobre el rectángulo este cambiará su color automaticamente.
Hay que tener en cuenta que podemos combinar los eventos con los segundos, es decir, podemos hacer que se inicie 2 segundos después del evento por ejemplo:
<set begin="click+2s" attributeName="fill" to="yellow" />
Los eventos se pueden combinar con los identificadores de otros elementos SVG para así iniciar una animación cuando ocurra un evento particular de otro elemento. Vamos a verlo con el siguiente ejemplo:
<rect id="rect1" width="200" height="100" style="fill:blue;"/> <rect id="rect2" width="200" height="100" style="fill:red; fill-opacity: 0;"> <animate begin="rect1.mouseover" attributeType="CSS" attributeName="fill-opacity" to="1" dur="1s" fill="freeze" /> </rect>
En este ejemplo tenemos dos rectángulos, uno de color azul y otro de color amarillo con opacidad 0, es decir, que este amarillo inicialmente no se ve. Ahora bien le colocamos al segundo rectángulo dentro una animación para que cambie su opacidad a 1 en 1 segundo y conserve los cambios (‘freeze’). Esta animación se inicia cuando se ejecuta el evento ‘mouseover’ sobre el elemento que tenga el identificador ‘rect1’.
Comentarios