SVG——新一代Web设计及互动媒体的革新
首页 支持与服务 SVG教程 SVG Path路径可以创建的三种曲线

SVG Path路径可以创建的三种曲线

SVG中路径命令可以创建三种类型的曲线(椭圆曲线、三次贝塞尔曲线、二次贝塞尔曲线),路径<path>标记是 SVG中最复杂的,它创建最复杂的形状,也是最有用、用的最多的。

来源:SVG中国(ChinaSVG.COM)

<1>、椭圆曲线是椭圆的一部分,也称为弧。A (或a)命令通过指定起点、终点、x 和 y 轴半径旋度和方向来创建它们。弧命令的格式如下:

A radiusX, radiusY x-axis-rotation large-arc-flag, sweep-flag endX, endY

"x-axis-rotation"是此段弧所在的椭圆的X轴与水平方向的夹角,也即 x轴的旋转角度;

large-arc-flag、sweep-flag决定了椭圆弧的绘制方向,值是 0或 1;

(endX,endY)是椭圆弧终点坐标。至于圆心坐标则是自动计算出来的。

<2>、三次贝塞尔曲线由一个起点、一个终点和两个将曲线”拖”向自己的控制点定义。C (或c)命令(指定起点和终点)和 S  (或s)命令(假设这条曲线从最近的命令终止的地方继续)创建这些曲线。

<3>、二次贝塞尔曲线与其三次贝塞尔曲线类似,不过仅包含一个控制点。Q (或q)和 T (或 t)命令可以创建这些曲线。

贝塞尔曲线的形状由起点和终点以及控制点的位置确定。这些命令的格式如下:

C control1x, control1y, control2x, control2y, endx, endy
S control2x, control2y, endx, endy
Q controlx, controly, endx, endy
T endx, endy

对于 S和 T命令,假设第一个控制点为前一条曲线的第二个控制点的反射。

由于描绘路径比较复杂,建议使用画图工具包来生成。

(THE END)