Animation - Common Animation Attributes
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.
Here are the attributes that specify element in SVG to
animate:
| Attribute |
Meaning |
|
attributeName |
Identifies the attribute or property to be animated.
For example, if if the fill attribute will be animated,
you expect to see: attributeName="fill".
|
|
attributeType |
Indicates the namespace of the attribute to animate.
The possible values are: "CSS" (a CSS property
defined as animatable by the SVG specification), "XML"
(an animatable XML attribute, also defined in the
spec) and "auto" (the default setting).
|
Here are the common attributes that controls the temporal,
duration and iteration of an animation, or define the values
of an animation:
| Attribute |
Meaning |
| begin |
Indicates the beginning of an animation. For example,
if begin="6s", the animation will begin
six seconds after the page loaded. |
| dur |
Indicates the duration of an animation
|
| end |
Defines when to end an animation |
| restart |
Indicates when the animation can again be started.
The possible values are: "always", "whenNotActive"
and "never".
|
| repeatCount |
Defines the number of iterations of the animation |
repeatDur |
Defines the duration in which the animation can
be repeated |
| fill |
Defines how the behavior of the element is to
be after the animation. The possible values are: "remove"
(the element is removed at the end of the animation)
and "freeze" (the element is maintained
in the state in which it is reached the end of the
animation). |
| min |
Defines a minimum period for the animation |
| max |
Defines one maximum duration for the animation |
| from |
Specifies the starting value of the animation.
|
| to |
Specifies the ending value of the animation.
|
|
values |
A semicolon-separated list of values to be displayed
during the animation.
|
|
Dynamic SVG 
