Skip to main content

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属性值末尾