SVG 入门教程(五) 路径

路径是什么？

<nobr>第 1 页（共4 页）</nobr>

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

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

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

xml 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="400"  
5.      xmlns="http://www.w3.org/2000/svg">  
6.   <desc>A simple pathdesc>  
7.   <rect x="1" y="1" width="350" height="350"  
8.         fill="none" stroke="blue" />  
9.   <path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"  
10.         fill="red" stroke="blue" stroke-width="3" />  
11. svg>  

 

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

1. M 100 100 ：移至点 100, 100。
2. L 300 50 ：画一条线至点 300, 50。
3. L 300 250 ：画一条线至点 300, 250。
4. L 100 300 ：画一条线至点 100, 300。
5. 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 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="4cm" height="4cm" viewBox="0 0 400 400"  
5.      xmlns="http://www.w3.org/2000/svg">  
6.   <desc>Curved pathsdesc>  
7.   <rect x="1" y="1" width="398" height="300"  
8.         fill="none" stroke="blue" />  
9.   
10.     
11.   <text x="25" y="30">Large arc flag=1text>  
12.   <text x="25" y="45">Sweep flag=0text>  
13.   <text x="25" y="60">Rotation=0text>  
14.   <path d="M75,100 a50,25 0 1,0 50,25"  
15.         stroke="blue" stroke-width="5" fill="none" />  
16.   
17.   . . .    
18.   <path d="M150,100 a50,25 0 1,1 50,25"  
19.         stroke="blue" stroke-width="5" fill="none" />  
20.   
21.   . . .    
22.   <path d="M275,100 a50,25 -45 1,1 50,25"  
23.         stroke="blue" stroke-width="5" fill="none" />           
24.            
25.     
26.   . . .    
27.   <path d="M100,225 a50,25 0 0,1 50,25"  
28.         stroke="blue" stroke-width="5" fill="none" />  
29.   
30.   . . .    
31.    <path d="M225,225 a50,25 0 0,0 50,25"  
32.         stroke="blue" stroke-width="5" fill="none" />                           
33. svg>  

曲线（续）

<nobr>第 3 页（共4 页）</nobr>

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

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

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

xml 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="4cm" height="4cm" viewBox="0 0 400 400"  
5.      xmlns="http://www.w3.org/2000/svg">  
6.   <desc>Curved pathsdesc>  
7.   <rect x="1" y="1" width="398" height="300"  
8.         fill="none" stroke="blue" />  
9.   
10.     
11.   <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"  
12.         stroke="blue" stroke-width="5" fill="none" />  
13.   
14.   <circle cx="175" cy="100" r="5" fill="red" />  
15.   <circle cx="75" cy="100" r="5" fill="red" />  
16.   <circle cx="325" cy="150" r="5" fill="red" />  
17.      
18.   <path d="M75,225 q25,-75 100,0 t150,50"  
19.         stroke="blue" stroke-width="5" fill="none" />  
20.                       
21.   <circle cx="175" cy="225" r="5" fill="red" />  
22.   <circle cx="75" cy="225" r="5" fill="red" />  
23.   <circle cx="325" cy="275" r="5" fill="red" />  
24.      
25. svg>  

 

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

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

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

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

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

xml 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="4cm" height="4cm" viewBox="0 0 400 400"  
5.      xmlns="http://www.w3.org/2000/svg">  
6.   <desc>Markersdesc>  
7.   <defs>  
8.     <marker id="arrow"  
9.       viewBox="0 0 10 10" refX="0" refY="5"    
10.       markerUnits="strokeWidth" markerWidth="3" markerHeight="10"  
11.       orient="auto">  
12.   
13.       <path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>  
14.   
15.     marker>  
16.   defs>  
17.   <rect x="1" y="1" width="398" height="300"  
18.         fill="none" stroke="blue" />  
19.   
20.     
21.   <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"  
22.         stroke="purple" stroke-width="5" fill="none"  
23.         marker-start="url(#arrow)"  
24.         marker-mid="url(#arrow)"  
25.         marker-end="url(#arrow)" />  
26.   
27.     
28.   <path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50"  
29.         stroke="purple" stroke-width="3" fill="none"  
30.         marker-start="url(#arrow)"  
31.         marker-mid="url(#arrow)"  
32.         marker-end="url(#arrow)" />  
33. svg>  

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

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