December 2002
Beginner to intermediate
464 pages
8h 34m
English
There are five animation elements. These are:
<animate>
<set>
<animateColor>
<animateMotion>
<animateTransform>
We'll take a look at each element in turn.
The code for Example 9-1 showed an example of the <animate> element. This element is both the simplest to use and the most versatile SVG animation element. It animates one attribute or property over time. In Example 9-1, the <animate> element was used to animate the cx attribute of a circle to make the circle move horizontally. The code in Example 9-2 shows the <animate> element used to create a more complex animation. The rectangle in Example 9-2 grows, changes color from red to green, and increases in opacity over the duration of 8 seconds. The code ...