<rect id="rect" style="fill:blue;opacity:1" x="10" y="10" width="150" height="75"/> <circle id="circ" style="fill:green" cx="240" cy="60" r="50"/> <animate xlink:href="#circ" attributeName="r" from="50" to="20" begin="circ.click" dur="4s" fill="freeze"/> <animate xlink:href="#rect" attributeName="width" from="150" to="90" begin="rect.click" dur="10s" /> <animate xlink:href="#rect" attributeName="height" from="75" to="150" begin="rect.click+4s" dur="6s" />
The attributes from and to are an alternative way of writing the values attribute when you only have start and end values. There is no real advantage and they take more typing. Clicking on the rectangle demonstrates what happens when the default option of fill="remove" is set. When the rectangle completes the animation it reverts back to the initial values for width and height. Clicking on the circle and it retains the final position. Clicking on the circle again and it repeats the animation from the starting value again.
Here is another example:
<circle id="start" cx="60" cy="60" r="50" style="fill:green;opacity:1;stroke:none"> <animate attributeType="CSS" attributeName="opacity" values="1;0;1" begin="0s;start.click" dur="12s" /> <animate attributeType="XML" attributeName="cx" values="60;200;60" begin="0s;start.click" dur="12s" /> <animate attributeType="XML" attributeName="cy" values="60;100;60" begin="3s;start.click+3s" dur="6s" /> <animate attributeType="XML" attributeName="r" values="50;30;50" begin="4s;;start.click+4s" dur="8s" /> </circle>
The main points are:
- Any number of animations can take place together
- Start and stop times can vary
- If an absolute time is given for begin it defines a time that starts at 0 secs when the program is loaded
- fill="freeze" is not needed as the values return to their original values anyway
- CSS property takes precedence over the XML attribute
- Note that more than one start time can be given in which case they take place in sequence