许多字母命令(例如：M m）（但不是全部）成对。有一个大写和一个小写版本。大写版本是绝对版本，小写是相对版本。让我们继续以M为例：
M 100,100意思是“拿起笔并将其移动到确切的坐标100,100”m 100,100的意思是“将笔100向下移动100和从你现在的任何地方向右移动100”。- 大小字母绝对坐标，小写字母相对坐标
许多命令具有相同的设置。“笔”当前位置的小写版本因素。【每一个点 2个值, 负数向反方向走】
| Mx，y | 移动到绝对坐标x，y |
| mx，y | 向右移动x并向下移动y（如果为负值，则向左移动并向上移动） |
| Lx，y | 绘制一条直线到绝对坐标x，y |
| lx，y | 绘制一条直线，指向相对正确的x和向下y的点（或者如果为负值，则向上并向上） |
| Hx | 水平画一条直线到确切的坐标x |
| hx | 相对于右侧x水平绘制一条线（如果为负值，则向左侧绘制一条线） |
| Vy | 垂直绘制一条直线到确切的坐标y |
| vy | 垂直相对向下画一条线（如果是负值，则向上画一条线） |
| Z（或z） | 画一条直线回到路径的开始处（从当前位置到起点画一条直线闭合） |
C命令需要三点。前两个点定义了两个贝塞尔曲线手柄的位置，三点中的最后一点是曲线的终点。
S（或s）命令是与C类似命令，它需要2个，因为它假设第一贝塞尔点是从最后一个S或C命令的最后一个Bezier点的反映。（右）
1.如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。
2.如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。
Q命令它需要两个点。它想要的贝塞尔点是一个“二次曲线”控制点。就好像它的起点和终点在控制句柄结束的地方共享一个点。(左）
T命令Q命令的简写命令。与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。
1.T命令前面必须是一个Q命令，或者是另一个T命令。
2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
A命令可能是最复杂的，或者至少需要最多的数据。你可以给它定义一个椭圆的宽度，高度，椭圆旋转方式以及终点的信息。允许不闭合。可以想像成是椭圆的某一段，共七个参数。
参数：rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
RX,RY指所在椭圆的半轴大小（ 弧的半长轴长度， 弧的半短轴长度）
XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度（是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针旋转角度）。
FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
X,Y为终点坐标； 这个2个觉得着椭圆的大小
然后获得更多有关沿着该椭圆的哪条路径的信息，您希望获得该路径：
有两个可能的路径椭圆和两个不同的椭圆路径，给出四条可能的路径。
第一个参数是大弧标志。它只是确定弧线是否应该大于或小于180度; 最后，这个标志决定弧线将围绕给定的圆周运行的方向。
第二个参数是扫描标志。它确定弧线是否应该开始以负角度或正角度移动，这基本上会选择您将要绕行的两个圆圈中的哪一个。
| CcX1，cY1 cX2，cY2 eX，eY | 绘制基于两个贝塞尔控制点的贝塞尔曲线，并在指定坐标处结束 |
| C | 与所有相对值相同 |
| ScX2，cY2 eX，eY | 基本上，假定第一个贝塞尔控制点的C命令是前一个S或C命令中最后一个贝塞尔点的反映 |
| s | 与所有相对值相同 |
| QcX，cY eX，eY | 根据单个贝塞尔控制点绘制贝塞尔曲线，并在指定坐标处结束 |
| q | 与所有相对值相同 |
| TeX，eY | 基本上，假设第一个贝塞尔控制点的Q命令是前一个Q或T命令中使用的最后一个贝塞尔点的反映 |
| t | 与所有相对值相同 |
| ARX，RY旋转，弧，扫，EX，EY | 绘制一条基于椭圆形曲线的弧线。首先定义椭圆的宽度和高度。然后是椭圆形的旋转。随着终点，这使得两个可能的椭圆。所以弧和扫描是0或1，并确定哪个椭圆和哪条路径。 |
| a | 与eX，eY的相对值相同 |
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
svg 说明使用：https://css-tricks.com/svg-path-syntax-illustrated-guide/ #英语不好，可以谷歌浏览器打开
https://www.sitepoint.com/closer-look-svg-path-data/
svg 其他一些生成路径地址：https://juejin.im/entry/59b5e629f265da065f047ad6