svg path 路径

许多字母命令(例如：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()：关闭路径

编辑路径：http://jxnblk.com/paths/

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

svg 其他工具 http://developer.51cto.com/art/201508/488797.htm