SVG: animate tag

By Xah Lee. Date: .

Here is a example of SVG animation. Click on the red square.

<svg>
<rect id="s67180" x="0" y="50" width="50" height="50" style="fill:red" />

<animate xlink:href="#s67180"
 attributeName="x"
 from="0"
 to="100"
 dur="2s"
 begin="click"
 fill="freeze" />

</svg>

Use xlink:href to refer to a element you want to animate. Like this:

<animate xlink:href="#id" >

This element is called the target.

attributeName
specify the attribute to animate.
attributeType
allowed value are "CSS", "XML" or "auto" (default). If value is "CSS", it means the value of attributeName is a CSS attribute. Similarly for XML. "auto" means search CSS attributes first. attributeType is necessary because some attribute in SVG and CSS have the same name but different meaning.
from
Start value.
to
End value.
dur
value can be "3s" meaning 3 seconds, or "click" or "click+3s"
begin
value can be 3s, "click", and many others.
restart
allowed values are "always", "whenNotActive", "never". Means if the animation can be restarted.
fill
allowed values are "freeze", "remove". Freeze means when the animation is finished, stop at that frame. Remove means show the frame before animation.
repeatCount
example: "3"
repeatDur
example: "3s" or "Indefinite"

Value Changes by Frame

The from and to changes a value in one direction.

You can can specify a list of values for the animation, by using values and keyTimes, like this:

values="0;50;20;100" keyTimes="0;0.5;0.9;1"

The values and keyTimes are paired to create key frames for the animation. Like this pair:

valueskeyTimes
00
500.5
200.9
1001

This means:

Change the value from 0 to 50 to 20 to 100. The time it takes to change from one value to another is the keyTimes list.

Here is a example. Click on it.

<svg>
<rect id="r89114" x="0" y="50" width="50" height="50" style="fill:blue" />

<animate xlink:href="#r89114"
 attributeName="x"
 dur="2s"
 values="0;50;20;100"
 keyTimes="0;0.5;0.9;1"
 begin="click"
 fill="freeze" />

</svg>

values overrides from, to, by.

if keyTimes is omitted, it is assumed to be a list from 0 to 1, evenly divided.

Pace of Animation, calcMode

calcMode controls the pace of animation.

Possible values are

linear
default.
discrete
jump from one value to another. Do not interpolate.
paced
spline
<svg>
<rect id="r49857" x="0" y="50" width="50" height="50" style="fill:green" />

<animate xlink:href="#r49857"
 attributeName="x"
 dur="2s"
 values="0;50;20;100"
 keyTimes="0;0.5;0.9;1"
 begin="click"
 calcMode="discrete"
 fill="freeze" />

</svg>

SVG tutorial

Canvas Intro

JS in Depth
XAH  BUY NOW