SVG for Web Developers

The Animation Elements

There are five animation elements. These are:

• <animate>

• <set>

• <animateColor>

• <animateMotion>

• <animateTransform>

We'll take a look at each element in turn.

The <animate> Element

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 ...