O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required