SVG Animation – Animation Attributes
July 17, 2006 | 0 comments
These animation attributes apply to the elements set, animate, animateMotion, animateColor and animateTranform.
Animation
|
Attribute
|
Values
|
Initial
|
Comments
|
|
xlink:href
|
xlink
|
–
|
The reference to the SVG object to animate. Overrides direct parent. See note.
|
Note: If the animation element is the direct child of the the object being animated then using this attribute is redundant. The direct parent of an animation element is the target unless this is set otherwise.
AnimationAttribute
|
Attribute
|
Values
|
Initial
|
Comments
|
|
attributeName
|
Attribute Name
|
–
|
The name of the target attribute to animate.
|
|
attributeType
|
(xml, css, auto)
|
auto
|
Sets the namespace used to xml or css. The default, ‘auto’, ensures the change occurs.
|
AnimationTiming
|
Attribute
|
Values
|
Initial
|
Comments
|
|
begin
|
#event-list
|
none
|
The event list to begin the animation on.
|
|
dur
|
#duration
|
0s
|
The duration of the animation.
|
|
end
|
#event-list
|
none
|
The event list to end the animation on.
|
|
min
|
#duration
|
0
|
Minimum active duration. The animation will ignore end events until this time is reached. Unsupported by Adobe SVG plugin.
|
|
max
|
#duration
|
indefinite
|
Maximum active duration animating. The animation will end when this time is reached. Related to repeatCount. Unsupported by Adobe SVG plugin.
|
|
restart
|
(always | whenNotActive | never)
|
always
|
Sets when the animation can be restarted.
|
|
repeatCount
|
(# | indefinite)
|
0
|
The number of times to repeat the animation. Fractions are permitted.
|
|
repeatDur
|
(#duration | indefinite)
|
indefinite
|
The total duration to repeat the animation for.
|
|
fill
|
(freeze | remove)
|
remove
|
Sets if the animation’s final value sticks or not, respectively.
|
AnimationValue
|
Attribute
|
Values
|
Initial
|
Comments
|
|
calcMode
|
(discrete | linear | paced | spline)
|
linear
|
Sets how to interpolate the animation.
|
|
values
|
list
|
–
|
semicolon-separated list of values to set the attribute to. See SMIL standard
|
|
keyTimes
|
list
|
–
|
See SMIL standard
|
|
keySplines
|
list
|
–
|
See SMIL standard
|
|
from
|
attribute-value
|
current
|
The starting value animated from.
|
|
to
|
attribute-value
|
–
|
The ending value animated to.
|
|
by
|
#duration
|
–
|
Used with addition. Sets the value added to the animated attribute’s value by time the animation duration is completed.
|
AnimationAddition
|
Attribute
|
Values
|
Initial
|
Comments
|
|
additive
|
(replace | sum)
|
replace
|
Sets if this animation adds to value of the attribute and other animations or replaces the value.
|
|
accumulate
|
(none | sum)
|
none
|
Sets if repeat iterations are cumulative.
|
AnimationMotion
|
Attribute
|
Values
|
Initial
|
Comments
|
|
path
|
#path
|
The path the motion follows. Not used to reference a path. Use a child ‘mpath’ element with ‘xlink:href’ attribute to reference.
|
|
|
calcMode
|
–
|
paced
|
|
|
keyPoints
|
list 0->1
|
–
|
Semicolon-separated list of values from 0 to 1 which is the percent along the path at the corresponding keyTimes.
|
|
rotate
|
(angle | auto | auto-reverse)
|
0
|
Sets if the object is rotated along the path. auto makes x-axis parallel with path.
|
|
origin
|
default
|
none
|
Unused by SVG.
|
These attributes apply only to the animateMotion element.
animateTransform
|
Attribute
|
Values
|
Initial
|
Comments
|
|
type
|
(translate | scale | rotate | skewX | skewY)
|
translate
|
Sets the transformation animated.
|
This attribute applies only to the animateTransform element.
Comments