Designing SVG Web Graphics

The <animate> Element

I look at the <animate> element as a general-purpose SVG animation element because it can do some of everything. For some animations, the more specialized animation elements (<animateColor>, <animateTransform>, <animateMotion>, and <set>) provide additional control or convenience.

Animating motion

One straightforward type of animation that is possible using the <animate> element is linear animation, which can be done horizontally, vertically, or (by combining two animations) diagonally.

Animate a circle horizontally first:

Listing 8.7. (LinCircleAnim01.svg)

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="500" height="300"> ...