SVG: Animate Tag

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

e.g. "3"

repeatDur

e.g. "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 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>