Code Example

SVG Image

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

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="650" >

<!-- The color animation of the fill of the text -->
<text x="50" y="80" style="fill:red; stroke:lime;
font-family:Arial, sans-serif; font-size:90;">SVG

<animateColor attributeName="fill" from="#ff0000" to="rgb(0,255,0)" begin="2s" dur="8s" fill="freeze"/>

</text>

<!-- Multiple color change effects -->
<circle cx="110" cy="320" r="100" >

<animateColor attributeName="fill" from="rgb(100%,0%,0%)" to="orange" begin="0s" dur="5s"/>
<animateColor attributeName="fill" from="orange" to="yellow" begin="prev.end" dur="5s"/>
<animateColor attributeName="fill" from="yellow" to="#00FFFF" begin="prev.end" dur="5s"/>
<animateColor attributeName="fill" from="#00FFFF" to="blue" begin="prev.end" dur="5s" />
<animateColor attributeName="fill" from="blue" to="indigo" begin="prev.end" dur="5s" fill="freeze" />

</circle>

</svg>

The first example creates a simple color animation of the color of text. It animates the fill of the text 'SVG' from red to lime. The animation starts two seconds after the image loads, takes eight seconds for the color transition, and is frozen with the new color properties (both the fill and the stroke are lime when the animation finishes).

It is possible to combine multiple color changes to achieve a color cycle effect. In the second example, the circle's color changes through the spectrum from red to indigo.

With the multiple color changes, the color transformations need to be scripted so that they move through the spectrum in the correct order. To achieve this effect, use the begin="prev.end" attribute. This instructs the viewer to start the next animation when the previous animation has ended. It can be used with any animation element when scripting multiple animations on the same object.