Summary

---

 Download CD Content

Overview

This chapter demonstrates how to use the SVG animate, animateColor, and animateTransform elements in conjunction with other SVG elements in order to generate a variety of graphics images with animation effects. One obvious fact about animation-based graphics images is that they look much better when you view them in action-and in color-than they do in a static image. Therefore, it's a good idea to launch the code examples in this chapter (as well as later chapters containing animation) in your SVG viewer as you examine the SVG code.

The SVG animate element allows you to modify an attribute of an SVG element. For example, you can modify the width attribute of an SVG rectangle element in order to make it expand or shrink based on the range of values specified.

The SVG animateColor element allows you to specify a pair of colors (that represent the start color and end color for an SVG element) as well as a duration attribute that specifies the time interval during which the color changes take place.

The SVG animateTransform element is very powerful because it allows you to perform animation involving one or more of the SVG functions. For instance, you can rotate a triangle or a rectangle around its center or around one of its vertices. You can also rotate circles or ellipses around their centers as well as around one of the vertices of the rectangles that enclose them.

Yet another type of animation involves specifying an SVG clip-path that serves as the path on which a particular object will travel. This chapter contains an example of an ellipse that rotates around its center as it travels along the path of a Bezier curve. Incidentally, the clip path for animation is the same as the clip paths in Chapter 7 that were used as a 'window' in order to restrict the displayed portion of a graphics object.

In addition to providing simultaneous animation of multiple elements, SVG allows you to 'chain' animation events so that the start time for one element coincides with the 'end time' of another element. SVG also allows you to specify a value for a repeatCount attribute that controls the number of times an animation effect is repeated. The combination of these animation-related features gives you the foundation for creating realistic, powerful, and sophisticated animation effects. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 9 folder.

---