Example 1 is an animation of one attribute of an SVG object. Here we animate 'opacity' after a 1 second delay, from 0 to 1 (opaque) over a period of 5 seconds. When finished it stops.
With Example 2 we wait 4 seconds then flip the 'visibility' attribute on. We've also introduced rounded corners on the rectangle by setting 'rx' and 'ry' to 5px. As a short cut, if only the 'rx' value is set, the 'ry' value will be set the same.
Example 3 uses 'animate' to dynamically alter 3 attributes of a rectangle simultaneously. The top-left corner of the square (x,y) begins positioned at x=10px and y=270px. We begin animating the square after 3 seconds (begin="3s"). Then over a period of 9 seconds (dur="9s") we move the shape from its current position (from="10"), to 270px to the right (to="270"). It is important to note that it is still the top-left corner of the rectangle that is referenced.
At the same time we animate the width of the square from 100px (from="100") to 200px (to="200") over the same period of time (dur="9s"). The width begins with the original definition of the rectangle and continues until the width is 200px (from="100" to="200").
While the width is increasing, we also increase the height of the square, from 100px to 200px (from="100" to="200"). This effectively retains the square shape. We use the same increments and units as the width animation, except altering the height.
The square begins as 100px wide and 100px tall, with the top-left corner positioned at 10,270. When finished, the square will be 200px wide and 200px tall with the top left corner positioned at 270,270. The coordinates are arrived at thus:
Also, we've animated both the x and y attributes of the text ('Ex. 3').
All done.