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="500">

<!-- Animating visibility - circle -->
<circle id="circleSetExample" cx="70" cy="70" r="60" fill="red"/>
<set id="animIdforSet" xlink:href="#circleSetExample"
attributeName="r" to ="10" begin="3s" dur="5s" />

<!-- Animating visibility - text -->
<text id="TextElement" x="20" y="200"
style="font-family:Verdana, sans-serif; font-size:13;
visibility:hidden; fill:blue;stroke:blue" >
Now you see me!
<set attributeName="visibility" attributeType="CSS"
to="visible" begin="5s" fill="freeze"/>
</text>

</svg>

In the first example, after three seconds the circles radius is set to 10px for three seconds. When the five seconds is up, the radius returns to it original value. Note that the <set> animation element is contained separately from the <circle> element. It is linked to the circle through the xlink:href attribute.

In the second example, we keep some text hidden initially, and make it visible after five seconds. To do that, we set the visibility attribute in the <text> element to a value of hidden. The animation is controlled by a <set> element, which animates the visibility attribute from hidden to visible. The begin attribute indicates that the animation begins five seconds after the image is loaded, and keep it visible.