复制代码
<svg width=”190px” height=”160px”>
<path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″ stroke=”black” fill=”transparent”/>
</svg>
这个HTML片段绘制如下图形：
上面的S指令只有第二个控制点，第一个控制点采用了前面的曲线指令的第二个控制点的一个映射点。
绘制二次贝塞尔曲线指令：Q x1 y1, x y ， T x y (特殊版本的二次贝塞尔曲线)
二次贝塞尔曲线只有一个控制点(x1,y1)，通常如下图所示：
如果是连续的绘制曲线，同样可以使用简化版本T。同样的，只有T前面是Q或者T指令的时候，后面的T指令的控制点会默认设置为前面的曲线的控制点的映射点，体会一下：
复制代码
<svg width=”190px” height=”160px”>
<path d=”M10 80 Q 52.5 10, 95 80 T 180 80″ stroke=”black” fill=”transparent”/>
</svg>
这个HTML片段绘制如下图形：
同样的，如果T指令前面不是Q或者T指令，则认为无控制点，画出来的是直线。
相对坐标绘制指令
与绝对坐标绘制指令的字母是一样的，只不过全部是小写表示。这组指令的参数中涉及坐标的参数代表的是相对坐标，意思就是参数代表的是从当前点到目标点的偏移量，正数就代表向轴正向偏移，负数代表向反向偏移。不过对Z指令来说，大小写没有区别。
这里要注意，绝对坐标指令与相对坐标指令是可以混合使用的。有时混合使用可以带来更灵活的画法。
SVG path绘制注意事项：
绘制带孔的图形时要注意：外层边的绘制需要是逆时针顺序的，里面的洞的边的顺序必须是顺时针的。只有这样绘制的图形填充效果才会正确。
实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
