There are many options to animate the content of an SVG. We can use the SMIL animations as SVG
requestAnimationFrame() for complete custom animation. Let's give them a brush-up to SMIL
animations into the SVG context:
This method provides an abbreviated way of changing a series of attributes progressively from its initial value to a target value. When the animation ends, the attributes have the target value permanently. It works like this:
element.animateTo(obj [,duration] [,star] [,end])
As a first parameter, we receive an object with the attributes as keys, and the target values. Optionally we can include a transition time in milliseconds.
This is a complete example:
If you pass a time value 0, the change is executed immediately, and is not displayed the animation.
This method accept two optional parameters:
start- a callback function called when the animation is initialized.
end- a callback function called when the animation is finished.
# animate element
We can add with
.add('animate') an element that provides a way to animate an element's attribute.
animate is created nested to the element to which the animation is applied.
With the method
.attributeName(), we define the attribute to animate; the methods
.to() must be used for defining the initial and finish values of this attribute.
the animation duration ('1s' or '1000ms' are valid values) and
.repeatCount() defines the number
of animation or if this is
.keyTimes() you can define with more precision the animation, establishing
the values that the property has to have in each moment.
Other important method is
.fill(). In this case, it defines the final state of the animation. If
the value is
'freeze', the state of the last animation frame is kept, but by default is
'remove ', and as a result, after the last animation frame, the attribute value returns to the
If you add an animation after creating the SVG, it is essential to remember that it is necessary
to call to
.beginElement() method to start the animation. If this is not done, the effect can
be quite inappropriate.
# animateTransform element
.add('animateTransform'), we can animate an element with a transformation. Usually, the
animateTransform is created nested to the element to which the animation is applied.
In this case, method
.attributeName() must be called with
'transform' value, and the methods
.to() can be used for defining the initial and finish transformation values or use
.values() to determine the values into elapse animation time. As in other cases,
the animation duration, and
.repeatCount() establishes the number of animation, or if this is
'indefinite. If you need to add more than one
animationTransform, you need to call
# animateMotion element
.add('animateMotion') create an element can animate the movement of a shape along a motion path.
You can define the path directly on this element (
.path()) or reuse a previous path with
A handy attribute is
.rotate(), then define the shape orientation into the motion. It can
'auto-reverse'. As in other animations, you can use
.repeatCount() and other method to config the behavior.