svg用animate实现简单动画效果

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

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

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

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

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

运行效果：

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

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

运行效果：