svg用animate实现简单动画效果

svg中可以使用animate标签实现动画效果。

就是在相应的形状标签内加入animate标签，其中若干属性如下：

attributeName 目标属性名称
from 起始值
to 结束值
dur 持续时间
repeatCount 次数|indefinite，动画时间将发生几次，indefinite表示无限次。

一个简单示例效果，颜色在3秒内从steelblue渐变到pink：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<rect x="0" y="0" width="200" height="200" fill="steelblue">
		<animate attributeName="fill" from="steelblue" to="pink" dur="3" repeatCount="1"></animate>
	</rect>
</svg>

运行效果：

如果要多个动画效果，可以使用多个animate标签。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
	<rect x="0" y="0" width="200" height="200" fill="steelblue">
		<animate attributeName="fill" from="steelblue" to="pink" dur="3" repeatCount="1"></animate>
		<animate attributeName="width" from="200" to="10" dur="3" repeatCount="1"></animate>
		<animate attributeName="height" from="200" to="10" dur="3" repeatCount="1"></animate>
	</rect>
</svg>

运行效果：