SVG支持用<path> 标签用来定义图形的路径。本文将详细介绍SVG Path语法结构，并附图及SVG path实例以更直观的方式让你掌握SVG路径的运用...

SVG支持用<path> 标签用来定义图形的路径。本文将详细介绍SVG Path语法结构，并附图及SVG path实例以更直观的方式让你掌握SVG路径的运用。

　　下面的命令可用于路径数据：

* M = moveto
* L = lineto
* H = horizontal lineto
* V = vertical lineto
* C = curveto
* S = smooth curveto
* Q = quadratic Belzier curve
* T = smooth quadratic Belzier curveto
* A = elliptical Arc
* Z = closepath

　　注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
L H V指令

　　M起点X，起点YL（直线）终点X，终点YH（水平线）终点XV（垂直线）终点Y

图1 SVG中L H V指令演示图

图1 SVG中L H V指令演示图
A指令——弧

　　Arx,ry x轴旋转角度值 0/1 0/1
　　 0，0： Y轴+逆时针旋转
　　0，1： Y轴+顺时针旋转
　　1，0： X轴+逆时针旋转
　　1，1： X轴+顺时针旋转

图2 SVG中A指令(弧)演示图

图2 SVG中A指令(弧)演示图
Q指令——二次贝塞曲线

　　Q 控制点X，控制点Y 曲线结束点X，曲线结束点Y

图3 SVG中Q指令(二次贝塞曲线)演示图

图3 SVG中Q指令(二次贝塞曲线)演示图
T指令—— 映射

　　T映射前面路径后的终点X，映射前面路径后的终点Y

图4 SVG中T指令(映射)演示图

图4 SVG中T指令(映射)演示图
C指令——三次贝塞曲线

　　C第一控制点X，第一控制点Y 第二控制点X，第二控制点Y曲线结束点X，曲线结束点Y

图5 SVG中C指令(三次贝塞曲线)演示图

图5 SVG中C指令(三次贝塞曲线)演示图
S指令——

　　S第二控制点X，第二控制点Y 结束点X，结束点Y

图6 SVG中S指令演示图