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 坐标
- V/v = vertical lineto 从当前位置绘制竖直线到达指定的y 坐标
- C/c = curveto 从当前位置绘制三次贝塞尔曲线到指定位置
- S/s = smooth curveto 从当前位置光滑绘制三次贝塞尔曲线到指定位置
- Q/q = quadratic Belzier curve 从当前位置绘制二次贝塞尔曲线到指定位置
- T/t = smooth quadratic Belzier curveto 从当前位置光滑绘制二次贝塞尔曲线到指定位置
- A/a = elliptical Arc 从当前位置绘制弧线到指定位置
- Z/z = closepath 闭合当前路径
<svg width="500" height="500">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>以上代码开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。
运行结果如下
SVG的内容很多，此处就不多详写了，如果需要了解更多SVG的内容，可查看W3C SVG教程