SVG入门-动画

前言

SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。

SVG 动画元素介绍

---

svg可以设置动画的元素有5个，分别为 <set> <animate> <animateColor> <animateTransform> <animateMotion>

接下来我们具体来看看每一个元素的作用:

set

---

set用于设置属性值，可以用于实现延迟设置功能，也就是可以在特定时间之后修改某个属性值。

<svg height="400" width="400">
  	<g> 
	    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
	      	动
	      	<set attributeName="x" attributeType="XML" to="60" begin="3s" />
	    </text>
	</g>
</svg>

这里的attributeName是定义要设置的属性，attributeType是定义要设置属性的类型，to为定义的值，begin为延迟时间。

animate

---

实现基础动画，跟css3中的animation类似。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
    <rect x="0" y="0" width=