SVG: animate tag
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 ofattributeName
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:
values | keyTimes |
0 | 0 |
50 | 0.5 |
20 | 0.9 |
100 | 1 |
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>