SVG 路径简介

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列

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

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 闭合当前路径

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move
to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M
10 10”。这一段字符结束后，解析器就会去读下一段命令。

注释：

区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置 （例如：从上一个点开始，向上移动10px，向左移动7px）
最后的参数表示最终要到达的位置
上一个命令结束的位置就是下一个命令开始的位置
命令可以重复参数表示重复执行同一条命令。