Sams Teach Yourself SVG in 24 Hours

Using Time Dependencies

You've just seen how the begin and end attributes were based on time, but in many instances, you will want these attributes triggered by another event. An event can be a number of things, including a user's mouse movements, an animation ending, or a user pressing a key.

For instance, rather than having your ball animation (from Figure 12.1) roll down the hill after 8.5 seconds, you may want it to wait until another animation has finished playing. Using event suffixes (declarations added to an id value after a period), you can trigger animations to occur based on other events. By replacing the time-based values of the begin, end, or dur attributes, another event can trigger an animation to occur.

Thus, rather than using ...