Animar el color

facebook-svg gplus-svg twitter-svg

El elemento <animateColor> se utilizaba antes para controlar el cambio del color en el tiempo. Actualmente este elemento es obsoleto, y para animar el color de relleno utilizamos el elemento <animate>.

Un ejemplo básico

A continuación haremos que el color ( attributeName="fill"  attributeType="CSS" ) de un rectángulo cambie de verde ( from="#6ab150" ) a amarillo ( to="#ffff00" ) durante un período de 5 segundos ( dur="5s" ).  Después de los 5 segundos la animación quedará congelada ( fill="freeze" ).



  
    
  

Haz clic en el rectángulo para que la animación vuelva a empezar.

Valores múltiples con values

Esta vez queremos animar el color de relleno ( attributeName="fill" ) de un círculo. El color de relleno ( fill :#6ab150 ) aparece como valor del atributo style, y es por lo tanto un atributo CSS ( attributeType="CSS" )
Queremos que la animación dure 5 segundos ( dur="5s" ) y que se repita indefinidamente ( repeatCount = "indefinite" ). Ahora viene lo importante. Utilizamos el atributo values para comunicar al SVG los valores que queremos que tome el atributo fill durante la animación. Los valores van separadas por un punto y coma ( ; ).

values="#6ab150; #ffff00; #6ab150"

Por favor observe que el primer y el último valor son iguales ( #6ab150 ). Esto permite una transición suave entre las varias etapas de la animación.