O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

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

Basic Attributes of an Animation

To define an animation, you need to know what is to be animated, when the animation will begin, what is the starting value of the attribute to be animated, and what is the presentation value of that attribute at the end of the animation.

The attribute to be animated is specified by the value of the attributeName attribute. For example, if the fill attribute will be animated, you expect to see

attributeName="fill" 

as an attribute on the animation element.

The timing of the beginning of an animation is determined by the value of the begin attribute. For example, if the animation will begin six seconds after the page loaded, you see this line in the code:

begin="6s" 

SVG animations can be chained. If the animation ...

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