路径是什么? | <nobr>第 1 页(共4 页)</nobr> |
SVG 提供的预定义形状当然是有用的,但有时它们还不足以完成工作。特别是在这两种情况下:第一,当图像需要曲线,它不能由多边形或折线创建,第二,当动画或文本需要沿页面上的特定形状前进时。
这就需要路径了。路径是一系列命令,用来创建作为图像一部分精确定义的形状。该形状可以是开放的(如线)或闭合的(如多边形),并可以包含一条或多条线、曲线和线段。
最基本的路径由几条线段组成。例如:
- 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”命令所指定的点。)
最终结果显示如下:
![](https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/images/svg018.gif)
曲线 | <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 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>
曲线(续) | <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 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 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 轴方向)。
请注意标记大小随笔划大小的改变而改变:
![](https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/images/svg021.gif)