学习了一下svg相关的知识,绘制图形那些相对比较简单,这里主要总结一下path中相关的命令,熟悉了相关命令,才能快速的看懂path中相关符号的意思。
path命令
M = moveto
M命令仅仅是移动画笔,但不画线,M命令需要传递两个参数,分别为x坐标 和y坐标。
L = lineto
L命令将会在当前位置和新位置之间绘制一条线,L命令需要传递两个参数,分别为x坐标 和y坐标。
H = horizontal lineto
用来绘制水平方向上的线,只在x轴上移动,H命令只需传递一个x坐标即可。
V = vertical lineto
用来绘制垂直方向上的线,只在y轴上移动,H命令只需传递一个y坐标即可。
C = curveto
三次贝塞尔曲线,需要定义一个点和两个控制点,如:C x1 y1, x2 y2, x y
,其中(x ,y)
为曲线的终点,(x1 ,y1)
为起点控制点,(x2 ,y2)
为终点控制点。
S = smooth curveto
也是用于绘制三次贝塞尔曲线,如果S命令跟在一个C或S命令后面,则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用,前面没有C或S命令,那当前点将作为第一个控制点。
Q = quadratic Bézier curve
二次贝塞尔曲线,只需要一个控制点。Q x1 y1, x y
T = smooth quadratic Bézier curveto
跟三次贝塞尔曲线一样,可以在Q命令后添加一个坐标点来延长二次贝塞尔曲线。
A = elliptical Arc
弧形命令A是另一个创建SVG曲线的命令。A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-
rx
x轴半径 -
ry
y轴半径 -
x-axis-rotation
弧形的旋转情况。 -
large-arc-flag
角度大小。决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。 -
sweep-flag
弧线方向。0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。 -
x
x坐标 -
y
y坐标