SVG <Animation> Animation Element

The SVG <Animation> animation element is used to create animations for SVG graphics. The animation element was originally defined in the Synchronized Multimedia Integration Language (SMIL). In animations, it is necessary to specify properties, motion, color, the start time of the animation, and the start and end values of the animation duration.

Animations can be applied to shapes within SVG images. There are several different methods to animate SVG shapes. In this article, I will introduce various possibilities.

SVG Animation Example

This is a simple SVG animation example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="110" width="110"
　　　　　　　　　style="stroke:#ff0000; fill: #0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　to="360　60　60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Note how the <rect> element is nested inside the <animateTransform> element. It is this element that animates the rectangle.

This is the generated SVG animation:

Overview of Animation Options

Animation is created by manipulating the properties of the shape that change over time. Use5One or more of the SVG animation elements complete this operation:

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Each of these SVG animation elements sets or sets the animation of different aspects of SVG shapes. These animation elements will be explained in the rest of this article.

set

This set element is the simplest element in SVG animation elements. After a specific time interval, it simply sets the attribute to a specific value. Therefore, the shape does not animate continuously, but only changes the attribute value once.

Here is an example of a <set> element:

<svg　width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<set attributeName="r" attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

Note that the <set> element is nested inside the circle element. This is how the <set> element is applied to the shape-by nesting it within the SVG element to be applied.

The <set> element sets the value of the attribute at a specific time. The name of the attribute to be set is specified in the attributeName attribute. The value to be set is specified in the to attribute. The time to set the attribute value is specified in the begin attribute.

In the above example, the r in5seconds later, the attribute will be set to10After running, the image effect will be:

attributeType

The previous example also has an attributeType attribute in the <set> element. The value is set to XML. This is because the attribute (r attribute) to be set in the example is an attribute of the SVG Circle element. Since SVG elements are XML elements, SVG attributes are also XML attributes.

You can also set animations for the CSS properties of the shape. If you do this, you need to set the attributeType to CSS. If the attributeType attribute is not provided, the browser will try to guess whether the attribute to be animated is an XML attribute or a CSS attribute.

animate

The animate element is used to set animations for the attributes of SVG shapes. You can nest the animate element within the shape to be animated. Here is an example:

<svg　width="500" height="100"><circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
　　　　<animate attributeName="cx" attributeType="XML"
　　　　　　　　　　　　　from="30" to="470"
　　　　　　　　　　　　　begin="0s" dur="5s"
　　　　　　　　　　　　　fill="remove" repeatCount="indefinite"/>
</circle></svg>

This example changes the cx attribute of the <circle> element from the value30 (the 'from' attribute) is set to the value479(the 'to' attribute) animation. The animation starts at 0 seconds (the 'begin' attribute), and the duration is5seconds (the 'dur' attribute).

After the animation is complete, the animation attributes will be set back to their original values (the 'fill=remove' attribute is set). If you want the animation attributes to remain at the 'to' value of the animation-value), set the 'fill' attribute to 'freeze'. The animation repeats indefinitely (the 'repeatCount' attribute).

This is the generated animation:

animateTransform

<AnimateTransform> element can set animation for the Transform attribute of a shape. The <Animate> element cannot do this.

Here is an example:

<svg　width="500" height="100"><rect x="20" y="20" width="100" height="40"
　　　　style="stroke: #ff00ff; fill:none;" >
　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100" to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

This <animateTransform> example animates the attributes of the <rect> element nested within the transform. The type attribute is set to rotate (rotational transformation function), indicating that the animation transformation will be rotation. The parameters set in the from and to attributes are animated and passed to the rotate function. This example rotates around the point100,100 rotates from 0 degrees to360 degrees.

This is an example of animating the scale of the square:

<svg　width="500"　height="200">
　　　　<rect x="20" y="20" width="40" height="40"
　　　　　　　　　　style="stroke: #ff00ff; fill: none;" >
　　　　　　　　<animateTransform attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1　1" to="2　3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateTransform>
　　　　</rect>
</svg>

Again, the from and to attributes contain the values that are usually passed to the scale() transformation function as parameters.

This is the generated animation:

animateMotion (animation movement)

The <animateMotion> element can animate the movement of the shape along the path. It can also rotate the shape to match the slope of the path, just like a car driving on a mountain. Here is an example:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke: #000000; fill: none;"
　　　　　　　　　　　　></path>
　　　　<rect　x="0"　y="0"　width="30" height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s" dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

The path is specified in the attributes of the <animateMotion> element along the animation path of the rectangle. The path attribute uses the samepath elementThe same syntax.

This also shows the result animation of the path, so you can better follow the movement.

To rotate the square so that it aligns with the path's slope, set the rotate attribute of the <animateMotion> element to auto. Here is an example:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30" height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s" dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

This is the generated animation. Note how the rotation of the square changes to fit the path.

You can also set the rotate attribute to a specific value, such as20 or30 degrees. This will rotate the shape by that angle throughout the animation.

Time unit

When defining SVG animations, you can specify the start time and duration of the animation. When specifying, you can choose between different time units. The properties of various animation elements, such as begin, dur, and end, are usually specified within the time unit.

In these properties, you can specify a number followed by a time unit, as described in this example. For example5s5Seconds. Below is a list of time units you can use:

You can also specify time in a format that includes hours, minutes, and seconds. The format is as follows:

hh:mm:ss

Here is an example:

1:30:45

This example specifies1hours30 minutes45Seconds (of time, which is of course a long time for animations).

Synchronize animation

You can synchronize the start of one animation with the end of another. It looks like this:

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30" height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0" to="400"
　　　　　　　　　　　　　begin="0s" dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0" to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
</rect>
　　　　</svg>

This is the generated animation:

The id attribute of the first animation is set to one.

The second animation refers to the first animation through its begin attribute. The value of the begin attribute is set to one.end, meaning that the animation should start at the end of the animation with ID one.

When another animation starts or ends, you can start the animation using id.begin or id.end instead of using the ID of the animation element for synchronization.

You can also specify an offset to the start or end time of another animation, as shown below:

one.begin+10s
one.end+5s

Additionally, you can specify a clear end time in the animation end attribute. This will not replace the dur attribute. It simply adds another possible end to the animation, so whichever occurs first takes precedence. Here is an example:

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s" end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

The duration of this animation is10seconds, or stop when the animation with ID one ends, whichever comes first.

Repeated animation

You can use two attributes within the animation element to repeat the animation.

The first attribute is the repeatCount attribute. Within this attribute, you can set a number that will make the animation repeat this number of times, or indefinite to make the animation run continuously without stopping.

The second attribute is repeatDur, which specifies the duration to repeat the animation. You can also use the value indefinite in the repeatDur attribute, which has the same effect as using the value repeatCount.

Here are two examples:

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y" attributeType="XML"
　　　　　　　　from="0" to="50"
　　　　　　　　begin="one.begin+3s" dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Combined animation

You can list multiple animations within an element using <animation> to combine animations. As you have seen, but here is another example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="40" height="20"
　　　　　style="stroke: #000000; fill: none;">
　　　<animate attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10" to="400"
　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
　　　<animate attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10" to="100"
　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
</rect>
</svg>

In this example, there are two animations, each setting the animation for the x and y attributes of the rectangle. This is the generated animation:

When combining the <animateTransform> elements, the default behavior is that the second animation cancels the first animation. However, you can combine the transformation animations by adding the attributes additive and value sum to the two <animateTransform> elements. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" width="40" height="20"
　　　　　　style="stroke: #000000; fill: none;">
　　　　<animateTransform attributeName="transform" attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1" to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　></animateTransform>
　　　　<animateTransform attributeName="transform" attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20" to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s" dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite" additive="sum"
　　　　　　　　　　　　></animateTransform>
</svg>

This is the result animation of scaling and rotating the rectangle: