一、什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics），是基于 XML 的矢量图形描述语言，可以近似理解成 HTML，所以能和 JS 以及 CSS 进行交互。
二、SVG 绘制路径
SVG提供了rect、circle、ellipse、line、polyline、polygon六种基本形状用于图形绘制，这些形状可以直接用来绘制一些基本的形状，如矩形、椭圆等，而复杂图形的绘制则需要使用 path。
<path>通过属性 d 来定义路径，具体值是由专门的“指令字母+坐标值”实现，每一个命令对应一个字母，并且区分大小写，大写主要表示绝对定位，小写表示相对定位。
<path>属性 d 主要有以下几个命令：
其中，有5个指定属于基本指令，你也可以理解为“好理解好上手好记忆”的指令，见下表：
除了这5个参数少、直来直往的指令，剩下的，除了弧形命令A(Arcs)，就都是与贝塞尔曲线相关的命令了。数学比较差，暂不介绍。
三、SVG 动画变换
动画变换其实就是从A状态动画过渡到B状态的过程，可以用SMIL、Javascript、CSS3实现。本例子中使用腾讯公司的开源插件 Pasition 实现。（待续）