1. 基本语法
1.1 源码
<!-- example-1 -->
<circle cx="100" cy="110" r="20" style="fill: #ccf; stroke: black;">
<animate
attributeName="r"
attributeType="XML"
from="20"
to="50"
begin="0s"
dur="4s"
fill="freeze"
>
</animate>
</circle>
<!-- example-2 -->
<rect x="200" y="60" width="150" height="100" fill="#ffaa00">
<animate
attributeName="width"
attributeType="CSS"
from="150"
to="100"
dur="5s"
fill="remove"></animate>
</rect>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1.2 属性说明
- attributeName: 动画过程中变化的属性
- attributeType: 上例中，
r属于XML中的属性。另外，还有个值是CSS。缺省值为auto，解释器会先遍历CSS属性查找，若未找到再变脸XML属性 - from和to: 表示动画的起始值和终止值
- dur: 表示动画持续时间
- fill: 表示属性值最终状态。
freeze表示属性值提留在动画的最终状态(对应CSS中属性animation-fill-mode属性forwards的值)，remove表示恢复到最初的状态(对应CSS3中属性animation-fill-mode属性backwards的值)
WARNING
此处，fill属性为remove时，元素回到动画的最初状态。这里的最初状态并不是指from的状态，而是最初attributeName设置的值
2. 时间控制
SVG动画时间是从元素加载完成开始计算。有三种方式来控制动画时间
- 时:分:秒。例如：
dur=1:10:20，表示动画持续1小时10分钟20秒 - 分:秒。例如：
dur=02:15，表示动画持续2分钟15秒 - 时|分|秒。例如：
dur=3.5s，表示动画持续3.5秒。注意：数字和单位之间不能加空格，默认单位为：秒
3. 动画播放时机
默认情况下，元素动画播放是在元素加载完毕之后就开始播放。不过，SVG可以控制动画播放时机，我们可以方便的控制多个动画的先后顺序。
3.1 控制动画开始时机
控制矩形动画在圆形动画结束后开始播放。
- 源码
<circle cx="100" cy="110" r="30" style="fill: #ff5777;">
<animate
id="a1"
begin="0s"
attributeName="r"
attributeType="XML"
from="30"
to="60"
dur="5s"
fill="freeze"
></animate>
</circle>
<rect x="200" y="60" width="50" height="100" fill="#ffaa00">
<animate
attributeName="width"
attributeType="CSS"
begin="a1.end"
from="50"
to="150"
dur="5s"
fill="freeze"
></animate>
</rect>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3.2 控制动画结束时机
控制矩形在圆型动画结束后 （或矩形动画持续1s后） 停止播放。
- 源码
注意第19，20行，当两个条件满足其一时，动画即停止。
<circle cx="100" cy="110" r="30" style="fill: #ff5777;">
<animate
id="a1"
begin="0s"
attributeName="r"
attributeType="XML"
from="30"
to="60"
dur="5s"
fill="freeze"
></animate>
</circle>
<rect x="200" y="60" width="50" height="100" fill="#ffaa00">
<animate
attributeName="width"
attributeType="CSS"
from="50"
to="150"
dur="1s"
end="a1.end"
fill="freeze"
></animate>
</rect>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3.3 指定end值
矩形动画在元素加载后6秒钟后停止。
- 源码
end指定数值后，动画将从元素被加载开始算起，6秒后结束动画，此条件优先于dur满足
<rect x="200" y="60" width="50" height="100" fill="#ffaa00">
<animate
attributeName="width"
attributeType="CSS"
begin="2s"
from="50"
to="150"
dur="10s"
end="6s"
fill="freeze"
></animate>
</rect>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
4. 动画循环
4.1 基本用法
- repeatCount: 控制动画播放次数
- repeatDur: 控制动画播放时长
- 源码
<rect x="10" y="70" width="50" height="100" fill="#ffaa00">
<animate
attributeName="width"
attributeType="CSS"
from="50"
to="150"
dur="3s"
fill="remove"
repeatCount="3"
></animate>
</rect>
<circle cx="340" cy="120" r="30" style="fill: #ff5777;">
<animate
id="a1"
begin="0s"
attributeName="r"
attributeType="XML"
from="30"
to="60"
dur="3s"
fill="freeze"
repeatDur="5s"
></animate>
</circle>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
4.2 基于repeat的动画时机控制
我们可以以一个元素的repeatCount或repeatDur为参考点，作为控制另一个动画开始时机。示例如下：当矩形动画播放一次又1.5秒后开始播放圆形动画。
- 源码
<rect x="10" y="70" width="50" height="100" fill="#ffaa00">
<animate
id="anim1"
attributeName="width"
attributeType="CSS"
from="50"
to="150"
dur="3s"
fill="freeze"
></animate>
</rect>
<circle cx="340" cy="120" r="30" style="fill: #ff5777;">
<animate
begin="anim1.repeat(1)+1.5"
attributeName="r"
attributeType="XML"
from="30"
to="60"
dur="3s"
fill="freeze"
repeatDur="5s"
></animate>
</circle>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
5. 复杂属性动画
除了简单的宽(width)、高(height)、坐标(x、y)等属性的变化，SVG也可以针对元素颜色(rgb)、折线形状(polygon)等进行动画制作
5.1 颜色属性
<rect x="110" y="70" width="250" height="100" fill="#ffaa00">
<animate
attributeName="fill"
from="#ffaa00"
to="#ff0000"
dur="5s"
fill="freeze"
></animate>
</rect>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
5.2 折线路径属性(points)
- 源码
<polygon points="150,50 370,50 460,170 60,170" fill="#ffaa00">
<animate
attributeName="points"
attributeType="XML"
to="60,50 460,50 360,170 150,170"
begin="0s"
dur="5s"
fill="freeze"
></animate>
</polygon>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
6. 动画中间态
类似CSS动画中的keyframes关键帧，我们可以指定开始帧(0%)及结束帧(100%)状态，也可以指定0-100%的中间状态。SVG也有类似用法，仍然已上面动画为例：
- 源码
<rect x="110" y="70" width="250" height="100" fill="yellow">
<animate
attributeName="fill"
values="yellow;green;purple;red"
keyTimes="0; 0.8; 0.9; 1"
dur="8s"
fill="freeze"
></animate>
</rect>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
WARNING
注意代码第5行。默认情况下，多个中间状态动画时间会均分动画时长(dur)；SVG提供了keyTimes对每个中间状态时长进行分别控制；
7. set标签
<set>标签可以对一些不能插值的属性设置动画。比如透明度，3秒后将显示文本：
- 源码
<text text-anchor="middle" x="200" y="100" style="visibility: hidden;">
<set
attributeName="visibility"
attributeType="CSS"
to="visible"
begin="3s"
fill="freeze"
></set>
Test <set> visibility attribute
</text>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
8. animateTransform标签
8.1 基本用法
animateTransform标签可以针对元素的 旋转、缩放、斜切等设置动画。
8.2 叠加动画
如果想对元素的多个属性设置动画，需要使用additive属性。additive默认值为replace：表示当前属性动画覆盖前一个，如果想叠加使用动画，additive需要设置为sum。