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():关闭路径
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