SVG动画 <animate>
<animate>标签放在图形内部,以下的实例为将矩形在3秒内将其x属性从0更改为300。即从x
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
- attributeName:指定哪个属性需要产生动画效果(x、y)
- from:指定属性的起始值
- to:指定属性的结束值
- dur:指定动画运行的时间(持续时间)
- fill=“freeze|remove”:指定动画播放完毕后是停留在播放的终点还是回到起始位置
- repeatCount:指定动画的重复播放次数, “indefinite” 为无限重复播放
SVG路径<path>
- M/m = moveto 移动当前位置
- L/l = lineto 从当前位置绘制线段到指定位置
- H/h = horizontal lineto 从当前位置绘制水平线到达指定的x