前端入门学习笔记（十一）HTML5入门（五）SVG 动画、路径

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