表 2. path 元素支持的命令
能以大写或小写形式使用这些命令。当命令为大写时，应用绝对位置。当它为小写时，应用相对位置。提供所有命令示例已超出了本文的范围。但是，以下示例会演示它们的基本使用。
可以使用
path 元素从本文前面的示例创建任何简单的形状。清单 12 使用
path 元素创建了一个基本的三角形。
清单 12. 使用 path 元素创建一个三角形
双击代码全选
|
1
2
3
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>
</svg>
|
清单 12 中的代码会生成图 12 中的图形。
图 12. 使用 path 元素的三角形
这组命令使用
d 属性定义。在本例中，从 x 坐标 150 和 y 坐标 0 处开始绘制，这在移动到命令 (
M150 0) 中定义。然后再使用 “连线到” 命令绘制一条直线连接到 x 坐标 75 和 y 坐标 200 的位置 (
L75 200)。接下来，使用另一个 “连线到” 命令绘制另一条线 (
L225 200)。最后，使用 “封闭到” 命令封闭图形 (
Z)。
Z 命令没有提供任何坐标，因为要关闭您所在的路径，根据定义，要绘制一条从当前位置到图形起点（在本例中为 x = 150 y =0）的线。
这里的意图是展示一个基本示例；如果您想要的只是一个简单的三角形，最好使用
polygon 标记。
path 元素的真正强大之处是创建自定义形状的能力，如清单 13 所示。该示例来自万维网联盟 (W3C) 文档
可缩放矢量图形 (SVG) 1.1（第二版）。
清单 13. 使用 path 元素创建一个自定义形状
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5"/>
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5"/>
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5"/>
</svg>
|
清单 13 中的代码会生成图 13 中的图形。
图 13. 使用 path 元素的自定义形状
使用
path 元素，可以创建复杂的图形，比如图表和波浪线。请注意，这个示例使用了多个
path 元素。当创建图形时，根 SVG 标记中可以包含多个绘图元素。
过滤器和渐变
除了目前为止许多示例中的基本 CSS 样式，SVG 图形还支持使用过滤器和渐变。本节将介绍如何向 SVG 图形应用过滤器和渐变。
过滤器
可以使用过滤器向 SVG 图形应用特殊的效果。SVG 支持以下过滤器。
-
feBlend
-
feColorMatrix
-
feComponentTransfer
-
feComposite
-
feConvolveMatrix
-
feDiffuseLighting
-
feDisplacementMap
-
feFlood
-
feGaussianBlur
-
feImage
-
feMerge
-
feMorphology
-
feOffset
-
feSpecularLighting
-
feTile
-
feTurbulence
-
feDistantLight
-
fePointLight
-
feSpotLight
清单 14 创建了一种应用到矩形上的投影效果。
清单 14. 创建矩形的投影效果
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0"
width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha"
dx="20" dy="20"/>
<feGaussianBlur result="blurOut"
in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic"
in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green"
stroke-width="3" fill="yellow" filter="url(#f1)"/>
</svg>
|
清单 14 中的代码会生成图 14 中的图形。
图 14. 一个矩形的投影效果
过滤器在
def（表示定义）元素中定义。本示例中的过滤器分配了一个
id"f1"。
filter 标记本身拥有定义过滤器的 x 和 y 坐标及宽度和高度的属性。在
filter 标记中，可以使用想要的过滤器元素并将其属性设置为想要的值。
(责任编辑：12图资源库)
