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

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.