O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

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

Animating Color Transitions

The last animation element, animateColor, seems a bit redundant, as its function is easily duplicable using the animate element. Nonetheless, animateColor exists, and it allows you to transition an object's color between a variety of hues.

Using the same syntax as the animate element, animateColor's code looks like this:

<animateColor xlink:href=”#A” attributeName=”fill” from=”B” to=”C begin=”D” end=”E”/>.

Just as before, A represents the id of the object to be modified, D the time at which the animation should begin, and E the time at which the animation should cease. B represents the initial color value and C

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