Sams Teach Yourself SVG in 24 Hours

Understanding Motion

SVG offers five animation elements, each with its own focus, as detailed in Table 15.1.

Table 15.1. Animation Elements

Element	Function
animate	Alters the values of attributes
animateMotion	Moves objects along a path
animateTransform	Animates a transformation property
animateColor	Shifts colors
set	Switches the value(s) of an attribute

The fifth animation element, set, should look familiar, as you learned about it in Hour 13, “Interaction.” The set element is used for handling most of the distinct visual changes between two attribute states. The remaining four elements generally do the same; however, these elements transition between the two (or more) visual states, whereas the set element creates an abrupt change.

Although ...