The third declarative animation command is set which is primarily used when an attribute or property only has a small number of distinct values (enumerated). For example, in SVG the CSS property display has the values none (not displayed) or block (displayed).
<rect x="700" y="50" width="80" height="40" style="display:block"> <set attributeType="CSS" attributeName="display" to="none" begin="crcl1.click+1s"> <set attributeType="CSS" attributeName="display" to="block" begin="crcl1.click+2s"> <set attributeType="CSS" attributeName="display" to="none" begin="crcl1.click+3s"> <set attributeType="CSS" attributeName="display" to="block" begin="crcl1.click+4s"> </rect>
The main points are:
- set element just has the to attribute to define the new value of the attribute or property
- It can be used for most attributes. It is not restricted to enumeration types but tends to be used most with them
- It is often used for display (none, block) and visibility properties.
- It can have a dur attribute
- The additive and accumulate attributes are not allowed
- It is a simple shorthand for animate
Below is an example where parts of the diagram are initially set to display="none" and then are changed to display="block" by clicking on the right hand set of buttons.
The buttons on the right are actually two buttons on top of each other. If the one on top is clicked, it is set to display="none" so the pink button appears and when that is hit the original button is returned to display="block".