SVG
这篇文章的部分内容来自
path、d属性
d 是一个表现属性,因此也可以使用 CSS 进行修改。该属性采用 path() 或 none。
1.1 移动位置(M)
M = moveto(M X,Y) 命令的作用是将画笔移动到指定的坐标位置,具体用法如下:
M x,y x和y是绝对坐标,分别代表水平坐标和垂直坐标。 m dx,dy dx和dy是相对于当前点的距离,分别是向右和向下的距离
<path d="M 50,100" />
<path d="m 50,100" />
1.2 直线(L)
L = lineto(L X,Y) 命令的作用是画直线到指定的坐标位置,具体用法如下:
M x,y x和y是绝对坐标,分别代表水平坐标和垂直坐标。 m dx,dy dx和dy分别是向右和向下的距离
1.3 水平直线(H)
H = horizontal lineto(H X) 画水平线到指定的X坐标位置,具体用法如下:
H x x是绝对坐标,代表水平坐标。 H dx dx是向右的距离
1.4 垂直直线(V)
V = vertical lineto(V Y) 画垂直线到指定的Y坐标位置,具体用法如下:
V y y是绝对坐标,代表垂直坐标。 V dy dy是向下的距离
1.5 三次贝赛曲线(C)
控制点描述的是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终点斜率的渐变过程
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 画三次贝赛曲线,具体用法如下:
C x1,y1 x2,y2 x,y (x,y)表示的是曲线的终点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点。 c dx1,dxy dx2,dy2 dx,dy dx1、dy1和dx2、dy2都是相对于初始点,而不是相对于结束点的。dx和dy分别是向右和向下的距离
1.6 二次贝赛曲线(C)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) 画二次贝赛曲线,具体用法如下:
Q x1,y1 x,y (x,y)表示的是曲线的终点,(x1,y1)是起点的控制点。 q dx1,dxy dx,dy dx1、dy1是相对于初始点的距离。dx和dy分别是向右和向下的距离
1.7 平滑曲线(S)
S = smooth curveto(S X1,Y1,ENDX,ENDY) 画平滑曲率,具体用法如下:
S x1,y1 x,y (x1,y1)是中间点,(x,y)是终点。 s dx1,dy1 dx,dy dx1、dy1是相对于初始点距离。dx和dy分别是向右和向下的距离
1.8 弧线(A)
A = elliptical Arc(A RX,RY,XROTATION,LargeArcFlag,SweepFlag,X,Y) 画弧线,具体用法如下:
A rx,ry XROTATION LargeArcFlag SweepFlag x,y rx和ry分别是x和y方向的半径,而LargeArcFlag的值要到是0要么是1,用来确定是要画小弧(0)还是画大弧(1)。SweepFlag也要么是0要么是1,用来确定弧是顺时针方向(1)还是逆时针方向(0)。x和y是目的地的坐标。 a drx,dry XROTATION LargeArcFlag SweepFlag dx,dy dx1、dy1是相对于初始点距离。dx和dy分别是向右和向下的距离
1.9 关闭路径(Z)
Z = closepath() 连接起点与终点坐标,具体用法如下:
Z 用于d属性值末尾