Designing SVG Web Graphics

The <animateColor> Element

The <animateColor> element allows you to change the color of an SVG element or element group over time.

Now create a simple color animation of the color of some text. The following code animates the fill of the text Chameleon SVG from red to black (see Figure 08.16). The animation starts two seconds after the image loads, takes six seconds for the color transition, and is frozen with the new color properties (both the fill and the stroke are black when the animation finishes).

Figure 08.16. The color animation of the fill of the text is completed.

Listing 8.26. (ChamText01.svg)

<?xml version="1.0" standalone="no"?> ...