SVG: animate tag

Here's 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:

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's 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>

Reference

Animation – SVG 1.1 (Second Edition)