O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"?> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required