基本形状 基本 SVG 文档 2

定义和组

• 定义可重用部件

　　通常在 SVG 图像的构建中，各部分或者是可重用的，或者不便于在图像主体内定义。在这些情况下，通常方便的做法是在文档的定义部分内（作为 <defs></defs> 元素的一部分）通过给这些部分指定以后可在图像主体中调用的标识来创建它们。

　　 例如，在前面一页中显示的图像有两只眼睛，每只眼睛边缘有一个眼镜镜片。这个文档可以在定义部分中定义一个镜片，然后在文档中调用它两次，而不是创建这个 镜片两次（如下一页所示）。类似地，眼睛本身可以包含渐变（gradient），也应该定义这个渐变供以后引用。（在渐变中有更详细的介绍。）

<?xml version="1.0"?>
<!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="200" xmlns="http://www.w3.org/2000/svg">

<desc>Referenced items</desc>
<defs>

<polygon id="lens" points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none" stroke="purple" stroke-width="4"/>

<radialGradient id="irisGradient">
<stop offset="25%" stop-color="green" />
<stop offset="100%" stop-color="dodgerblue" />
</radialGradient>

</defs>

<g>
......

• 将定义的项作为属性使用

　　如前一页中定义的多边形和渐变，预定义项的实际用法通常有两种形式。

　　在这两种形式下，定义的项都通过其本地 URL（或 URI）引用。象 HTML 页面一样，id 属性创建了文档中的一个引用点。举例说来，这意味着 URI #irisGradient 引用标识为 irisGradient 的文档部分（或渐变定义）。即：可以从圆元素的 fill 属性内部引用它。

<circle cx="125" cy="50" r="25" fill="url(#irisGradient)"/>

　　请注意 url() 函数的使用。

　　最终代码在本节最后一页显示。请注意渐变现在用于眼睛的虹膜：

• 将定义的项作为元素使用

　　引用预定义项的第二种方法是通过用 <use/> 元素将它们链接到文档。例如：

<use xlink:href="#lens" mce_href="#lens" />

　　使用定义中提供的坐标将多边形放置在页面上。

　　在这里有两个重要事项要强调。首先，请注意 xlink 名称空间的使用。尽管大多数查看器没有它也将正确显示这一项，但为了保持一致，xlink 名称空间应该在 <svg></svg> 元素上定义，如下一页所示。

　 　其次，请注意 <use/>元素在以这种方式使用时成为了一个可以拥有自己坐标系统的容器。坐标系统在坐标系统和初始观察口（viewport） 一节中讨论，不过您可以看到一个具体的示例：第二个镜片最初用初始坐标 (190, 50) 创建，也就是相对第一个镜片偏移 125 个像素。而元素

<use xlink:href="#lens" mce_href="#lens" x="125"/>

　　在其原始位置创建第二个镜片，因为它相对于它的“容器”偏移了 125 像素。

• 编组元素

　　最后，SVG 不仅仅可以定义单个元素，这一点或许可以从前面讨论的 <radialGradient></radialGradient> 元素猜测出来。

　 　为兼顾可读性和方便性，将元素安排在一组中通常是个好办法。针对这一目的，SVG 提供 <g></g> 元素，它创建一个可以将元素置于其中的容器。这个容器可以用来标识元素，或提供一个公共属性（本地定义的属性将会覆盖公共属性）。例如代码

......
<g stroke="red" stroke-width="3">
<ellipse cx="125" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
<circle cx="125" cy="50" r="10" fill="black" />
</g>
......

　　创建一个所有笔划都是 3 个像素宽的眼睛（因为没有元素定义笔划宽度），而除了外边框笔划外所有笔划都是红色（因为椭圆定义了笔划颜色）。

• 组成整体

　　最终的文档显示各部分是如何添加的：

<?xml version="1.0"?>
<!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="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>Reusing items</desc>
<defs>

<polygon id="lens" points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none" stroke="purple" stroke-width="4"/>

<radialGradient id="irisGradient">
<stop offset="25%" stop-color="green" />
<stop offset="100%" stop-color="dodgerblue" />
</radialGradient>

<g id="eye">
<ellipse cy="50" rx="50" ry="25"
fill="none" stroke="black"/>
<circle cy="50" r="25"/>
<circle cy="50" r="10" fill="black"/>
</g>

</defs>

<g>

<use xlink:href="#eye" mce_href="#eye" x="125" fill="url(#irisGradient)"/>
<use xlink:href="#eye" mce_href="#eye" x="250" fill="dodgerblue"/>

<use xlink:href="#lens" mce_href="#lens"/>
<use xlink:href="#lens" mce_href="#lens" x="125"/>

<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>

</g>
</svg>

　　请注意可重用元素也允许每次使用不同的属性值，正如上面虹膜的例子中的填充属性所示。



--------------------
绘制

• 笔划与填充

　　整个教程到目前为止，示例已经演示了围绕对象的笔划或线以及对象内部区域的填充。这些属性实际上还有子属性，也可以设置子属性来创建不同的效果。这些属性包括：

fill：该属性指定用来填充对象内部区域的颜料。大多数情况下，该属性只是一种颜色，但它也可以是渐变或图案（会在图案中介绍）。这个值通常是关键字、颜色说明或指向预定义元素的 URI。
fill-opacity：该属性指定元素的透明性。值的范围从完全透明（0）到完全不透明（1）。
stroke：该属性指定元素外边框的外观。象 fill 一样，它引用颜料，尽管通常将它指定为一种简单颜色。
stroke-width：该属性指定笔划线的宽度。
stroke-linecap：该属性确定线末端的形状，可取的值有粗端（缺省值）、圆和正方形。
stroke-linejoin：该属性确定对象各角的外观。允许的值有直角（缺省值）、圆和斜角，它如示例中所示将尖角的边缘“剪掉”。
stroke-dasharray：该属性是一个整数系列（如 3、2、3、2、4、3、2 和 3），它允许对虚线中每一划的相对长度进行控制。
stroke-opacity：类似于 fill-opacity，该属性确定元素笔划线的相对透明性。
您可以在下面看到这些属性的一些示例：

<?xml version="1.0"?>
<!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="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>Stroke and fill</desc>
<defs>

<linearGradient id="lineGradient">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>

<polygon id="lens" points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="pink" stroke="purple" stroke-width="4"
fill-opacity=".5"/>

. . .

</defs>

<g>

. . .

<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>

<!-- Box with gradient along the outside -->
<rect x="50" y="125" width="275" height="40" fill="orange"
stroke-width="6" stroke="url(#lineGradient)" />

<!-- Purple line with rounded edges -->
<line x1="65" y1="190" x2="310" y2="190"
stroke="purple" stroke-width="20"
stroke-linecap="round"/>

<!-- Blue polygon with beveled corners -->
<polygon points="50,250 100,225 300,225 200,275" stroke="blue"
fill="none" stroke-width="10" stroke-linejoin="bevel" />

</g>
</svg>