Animating Colour

There used to be a separate animateColor element because of the complexity in the way that color is defined. Now the animate command can be used just like any other attribute or property value.

Colour can be defined in a number of different ways in SVG:

Base set of colour names that are also defined in CSS
- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
Extended set of colour names just defined in SVG
#f00: 3 hexadecimal characters defining RGB values 0,17,34,51,68,85,102,119,136,153,170,187,204,221,238,255 (equivalent to duplicating each character to hexadecimal form)
#ff0000: 6 hexadecimal characters defining RGB values in the range 0 to 255
rgb(255,0,0) defining the three RGB values
rgb(100%,0%,0%): defining the percentage of the range 0 to 255 to assign to the RGB values

<rect x="10" y="20" width="180" height="60" style="fill:aqua"> 
<animate attributeType="CSS" attributeName="fill" from="aqua" to="crimson" 
   begin="crcl1.click+0s" dur="4s" fill="freeze"/> 
<animate ... attributeName="fill" from="rgb(220,20,60)" to="rgb(255,255,0)" 
   begin="crcl1.click+4s" dur="4s" fill="freeze"/> 
<animate ... attributeName="fill" from="#ffff00" to="#00ff00" 
   begin="crcl1.click+8s" dur="4s" fill="freeze"/> 
<animate ... attributeName="fill" from="rgb(0%,100%,0%)" to="blue" 
   begin="crcl1.click+12s" dur="4s" fill="freeze"/> 
<animate ... attributeName="fill" from="blue" to="crimson" 
   begin="crcl1.click+16s" dur="4s" fill="freeze"/> 
<animate ... attributeName="fill" values="crimson;aqua;rgb(220,90,60);#00ff00;rgb(80%,100%,110%);blue"  
   begin="crcl1.click+20s" dur="16s" fill="freeze"/>
</rect>

The main point is that any method of specifying the colour value is allowed. Again, DO NOT USE animateColor as some browsers no longer support it, just use animate.

Animating Colour

Navigation