svg Path 路径指令

╰半夏微凉° 2022-09-22 11:52 266阅读 0赞

PATH十种指令：

括号内为相应参数，详细解释见后文。

M = moveto(M X,Y)  
L = lineto(L X,Y)  
H = horizontal lineto(H X)  
V = vertical lineto(V 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()  
注释：  
　　坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。  
　　所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系  
　　对于S,T指令，其X1,Y1为前一条曲线的X2,Y2的反射  
　　指令和数据间的空格可以省略  
　　同一指令出现多次可以只用一个

L H V指令  
　M起点X，起点YL（直线）终点X，终点YH（水平线）终点XV（垂直线）终点Y  
　如M10,20,L80,50,M10,20,V50,M10,20,H90

C指令——三次贝塞曲线  
　C第一控制点X，第一控制点Y 第二控制点X，第二控制点Y曲线结束点X，曲线结束点Y

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

Q指令——二次贝塞曲线  
　Q控制点X，控制点Y 曲线结束点X，曲线结束点Y  
如M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25

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

A指令  
　Elliptical Arc，允许不闭合。可以想像成是椭圆的某一段，共七个参数。  
　RX,RY指所在椭圆的半轴大小  
　XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。  
　FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。  
　FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针  
　X,Y为终点坐标  
　如M0,25,A12.5,12.5,0,1,1,0,25.01Z表示一个圆心在(12.5,25)，半径为12.5的圆。其中起点和终点几乎重合，用Z指令将它们闭合，注意终点不能填(0,25)，那样A指令是无法被解析的。

由以上介绍可以看出，手工绘制SVG路径是相当复杂的。对于简单的SVG图形，一般只使用M,L,Q,A,Z五种指令完成。更复杂的图形则必须要靠软件来帮助完成，比如ADOBE ILLUSTRATOR。

[https://www.w3.org/TR/SVG/paths.html][https_www.w3.org_TR_SVG_paths.html]

[https_www.w3.org_TR_SVG_paths.html]: https://www.w3.org/TR/SVG/paths.html