SVG 入门教程(五) 路径

最新推荐文章于 2021-03-23 12:32:55 发布

wenzi_li

最新推荐文章于 2021-03-23 12:32:55 发布

阅读量217

点赞数

分类专栏： SVG 文章标签： XML

SVG 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了SVG中的路径概念及其创建方式，包括直线、曲线等不同类型的路径，并探讨了如何使用标记来增强路径的表现力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路径是什么？

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

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

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

xml 代码

xml version="1.0" standalone="no"?>
"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 pathdesc>
<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”命令所指定的点。）

最终结果显示如下：

曲线	<nobr>第 2 页（共4 页）</nobr>

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

椭圆曲线是椭圆的一部分，也称为弧。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 代码

xml version="1.0" standalone="no"?>
"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 pathsdesc>
<rect x="1" y="1" width="398" height="300"
fill="none" stroke="blue" />
<text x="25" y="30">Large arc flag=1text>
<text x="25" y="45">Sweep flag=0text>
<text x="25" y="60">Rotation=0text>
<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 代码

xml version="1.0" standalone="no"?>
"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 pathsdesc>
<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>

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

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

标记	<nobr>第 4 页（共4 页）</nobr>

标记是对路径的自然补充。它们是可以添加到线和路径起点、终点和顶点的元素。最常用的是将箭头添加到线的终点，不过可以使用任何对象。

过程很简单：定义标记，然后使用 marker-start、marker-end 和 marker-mid 属性将其赋值给相关元素。例如：

xml 代码

xml version="1.0" standalone="no"?>
"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>Markersdesc>
<defs>
<marker id="arrow"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>
marker>
defs>
<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="purple" stroke-width="5" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
<path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50"
stroke="purple" stroke-width="3" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
svg>

这个标记本身由一个简单的三角形路径组成，它由标记属性决定。已经设置了 viewBox，以便不管框是什么，标记本身总是会填充整个框。因为 markerUnits 值的缘故，框本身受应用标记线的大小影响。markerUnits 属性也被设置为 userSpaceOnUse，这使标记使用常规坐标系统。refX 和 refY 属性确定标记（该标记“附加”到它所标记的线）内的点。最后，标记的方位设为 auto，使它的 Y 轴与线的切线垂直。（为了理解这一方位，标记构建为指向 X 轴方向）。

请注意标记大小随笔划大小的改变而改变：