SVG: Animate Tag

By Xah Lee. Date: . Last updated: .

Simple Example

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

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

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

</svg>

Attributes of the Animate Tag

attributeName
specify the attribute to animate.
attributeType

allowed value are

  • "CSS"
  • "XML"
  • "auto" (default)
  • If value is "CSS", it means the value of attributeName is a CSS property.
  • If value is "XML", it means the value of attributeName is a XML property.
  • "auto" means search CSS property 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="jmhC4" x="0" y="50" width="50" height="50" style="fill:blue" />

<animate xlink:href="#jmhC4"
 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="sfFgp" x="0" y="50" width="50" height="50" style="fill:green" />

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

</svg>

Animation, CSS, SVG, Web