Set Element

The set element is used to set the non-numeric attribute or property.

It sets the initially invisible text item to visible text item at a certain time without the need of both "from" and "to" elements.

The <set> element only needs a "'to" attribute and the proper timing information.

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<rect x="50" y="40" width="60" height="60"
 style="fill: purple; fill-opacity: .4; stroke: black;">
<animate attributeName="width" attributeType="XML"
 begin="0s" dur="4s" from="60" to="0" fill="freeze"/>
<animate attributeName="height" attributeType="XML"
 begin="0s" dur="4s" from="60" to="0" fill="freeze"/>
</rect>

<text text-anchor="middle" x="60" y="60" style="visibility: hidden;">
<set attributeName="visibility" attributeType="CSS"
 to="visible" begin="4.5s" dur="1s" fill="freeze"/>
 All gone!

</text>
</svg>
</body>
</html>

Test it Now

Next TopicThe animateTransform Element

← prev next →