最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

svg用animate实现简单动画效果

html5 27浏览 0评论

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>

运行效果:

svg用animate实现动画效果

svg用animate实现动画效果

如果要多个动画效果,可以使用多个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>

运行效果:

svg用animate实现多个动画效果

svg用animate实现多个动画效果

转载请注明:快乐编程 » svg用animate实现简单动画效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址