svg基础 4 路径

最新推荐文章于 2024-06-20 23:01:49 发布

mydriverc

最新推荐文章于 2024-06-20 23:01:49 发布

阅读量942

点赞数

分类专栏： SVG/GML 文章标签： path 工作 c

SVG/GML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

路径是什么？

　　SVG 提供的预定义形状当然是有用的，但有时它们还不足以完成工作。特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建，第二，当动画或文本需要沿页面上的特定形状前进时。

　　这就需要路径了。路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、曲线和线段。

　　最基本的路径由几条线段组成。例如：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<desc>A simple path</desc>
<rect x="1" y="1" width="350" height="350"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
</svg>

　　上述代码根据提供的指令生成一个简单的多边形。这些指令如下所示：

M 100 100 ：移至点 100, 100。
L 300 50 ：画一条线至点 300, 50。
L 300 250 ：画一条线至点 300, 250。
L 100 300 ：画一条线至点 100, 300。
Z ：通过将线画回到原始点闭合此形状。（更具体地说，回到最近一条“move”命令所指定的点。）

　　最终结果显示如下：

　　请注意这里显示的所有命令都是大写字母，这说明这些坐标是相对于整个坐标系统的绝对坐标。使用小写字母命令则指明为相对坐标。因此命令 l 50 50 从当前点创建一条线至距当前点下方和右方各 50 像素的点，那一点可能在任何位置。

　　其它简单的线命令包括作水平线的 H （或 h）和作垂直线的 V （或 v）。

曲线

路径命令可以创建三种类型的曲线：

　　椭圆曲线是椭圆的一部分，也称为弧。A （或 a）命令通过指定起点、终点、x 和 y 轴半径、旋度和方向来创建它们，如下所示。

　　三次贝塞尔曲线由一个起点、一个终点和两个将曲线“拖”向自己的控制点定义。C （或 c）命令（指定起点和终点）和 S （或 s）命令（假设这条曲线从最近的命令终止的地方继续）创建这些曲线。
二次贝塞尔曲线与其三次贝塞尔曲线类似，不过仅包含一个控制点。Q（或 q）和 T（或 t）命令可以创建这些曲线。

　　下面的示例显示了一些样本弧，为了清楚除去了文本。弧命令的格式如下：

A radiusX, radiusY rotation large arc flag, sweep flag endX, endY

　　因此一个半径为 50 和 25，没有旋度, 使用椭圆长轴部分以及曲线的下段，在距起点右边 50 个像素和下方 25 个像素处终止的弧将使用：

a50,25 0 1,0 50,25

　　一些变体如下所示：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<desc>Curved paths</desc>
<rect x="1" y="1" width="398" height="300"
fill="none" stroke="blue" />


<text x="25" y="30">Large arc flag=1</text>
<text x="25" y="45">Sweep flag=0</text>
<text x="25" y="60">Rotation=0</text>
<path d="M75,100 a50,25 0 1,0 50,25"
stroke="blue" stroke-width="5" fill="none" />

. . .
<path d="M150,100 a50,25 0 1,1 50,25"
stroke="blue" stroke-width="5" fill="none" />

. . .
<path d="M275,100 a50,25 -45 1,1 50,25"
stroke="blue" stroke-width="5" fill="none" />


. . .
<path d="M100,225 a50,25 0 0,1 50,25"
stroke="blue" stroke-width="5" fill="none" />

. . .
<path d="M225,225 a50,25 0 0,0 50,25"
stroke="blue" stroke-width="5" fill="none" />
</svg>

　　请注意所有的弧形都有相同的起点和终点，但形状不同。

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

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<desc>Curved paths</desc>
<rect x="1" y="1" width="398" height="300"
fill="none" stroke="blue" />


<path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"
stroke="blue" stroke-width="5" fill="none" />

<circle cx="175" cy="100" r="5" fill="red" />
<circle cx="75" cy="100" r="5" fill="red" />
<circle cx="325" cy="150" r="5" fill="red" />

<path d="M75,225 q25,-75 100,0 t150,50"
stroke="blue" stroke-width="5" fill="none" />

<circle cx="175" cy="225" r="5" fill="red" />
<circle cx="75" cy="225" r="5" fill="red" />
<circle cx="325" cy="275" r="5" fill="red" />

</svg>