svg基础 3

绘制

• 笔划与填充

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

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>

• 颜色

　　颜色对于 SVG 图像是极其重要的。单个颜色可以直接使用它们的 RGB 值指定，或者使用差不多 150 个颜色关键字中的一个来间接指定，该关键字也引用 RGB 值。

　　RGB 值在 0 到 255 数值范围内指定一种颜色的红、绿、蓝成分的相对亮度。例如：

<?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>Colors</desc>
<defs>
</defs>

<g>

<text x="20" y="50" font-size="30">Colors can be specified</text>
<text x="20" y="100" font-size="30">by their
<tspan fill="rgb(255,0,0)">R</tspan>
<tspan fill="rgb(0,255,0)">G</tspan>
<tspan fill="rgb(0,0,255)">B</tspan>
values</text>
<text x="20" y="150" font-size="30">or by keywords such as</text>
<text x="20" y="200" font-size="30">
<tspan fill="lightsteelblue">lightsteelblue</tspan>,
</text>
<text x="20" y="250" font-size="30">
<tspan fill="mediumseagreen">mediumseagreen</tspan>,
</text>
<text x="20" y="300" font-size="30">and
<tspan fill="darkorchid">darkorchid</tspan>.
</text>

</g>
</svg>



　　完整的颜色关键字列表是 SVG 建议书的第一部分，您可以在 http://www.w3.org/TR/SVG/types.html#ColorKeywords 中找到。

• 渐变

　　正象您在前面的示例中看到的，渐变提供了将颜色混合在一起的能力。渐变有两种。对于每种情况，代码都指定沿着渐变向量的颜色“停止”或 颜色点，渐变到这些点就成为某种颜色。例如，指定红色在 0% 停止，白色在 50% 停止而蓝色在 100% 停止的渐变将逐渐由红色变为白色再变为蓝色，白色在渐变向量的中心。

　　可以推断或者直接指定渐变向量。以线性渐变为例，假设它从要填充区域的左缘开始到右缘结束。可以用 x1、y1、x2 和 y2 属性更改这一向量。也可以（依照）使用 gradientTransform 属性对这一向量进行变换。

　　以放射性渐变为例，渐变基于一个圆，可以用 cx、cy 和 r 属性调整外部圆（渐变向量终止的地方）的圆心和半径。可以使用 fx 和 fy 属性调整焦点（渐变向量起始的地方）。

　　考虑下面这些线性和放射性渐变的示例：

<?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>Colors</desc>
<defs>
<linearGradient id="linear1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="white"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<linearGradient id="linear2" x1="100%" y1="0%" x2="0%"
y2="100%">
. . .
</linearGradient>
<linearGradient id="linear3" gradientTransform="rotate(90)">
. . .
</linearGradient>
<radialGradient id="radial1">
. . .
</radialGradient>
<radialGradient id="radial2" fx="225" fy="225">

. . .
</radialGradient>
<radialGradient id="radial3" cx="25%" cy="25%" r="75%">
. . .
</radialGradient>

</defs>

<g>

<!-- First row -->
<rect x="10" y="10" height="100" width="100" stroke="black"
fill="url(#linear1)"/>
<rect x="125" y="10" height="100" width="100" stroke="black"
fill="url(#linear2)"/>
<rect x="240" y="10" height="100" width="100" stroke="black"
fill="url(#linear3)"/>

<!-- Second row -->
<rect x="10" y="125" height="100" width="100" stroke="black"
fill="url(#radial1)"/>
<rect x="125" y="125" height="100" width="100" stroke="black"
fill="url(#radial2)"/>
<rect x="240" y="125" height="100" width="100" stroke="black"
fill="url(#radial3)"/>

</g>
</svg>

• 图案

　　用图案填充对象在很多地方与用渐变填充类似。两种情况下，都定义填充然后从填充属性内部调用它。

　　定义图案与定义任 何其它作为 SVG 图像一部分出现的对象相似。它有位置、高度和宽度，通常还有一个或多个包含的对象。位置是基于整个文档还是基于正在被填充的对象由 patternUnits 属性确定，该属性可以设置为 objectBoundingBox 或 userSpaceOnUse；这些属性分别设置基于对象和文档的坐标。与渐变相似，可以变换图案（使用 patternTransform 属性）。

　　请考虑下面的示例：

<?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>Patterns</desc>
<defs>
<pattern id="notes" x="0" y="0" width="50" height="75"
patternTransform="rotate(15)"
patternUnits="userSpaceOnUse">

<ellipse cx="10" cy="30" rx="10" ry="5"/>
<line x1="20" y1="30" x2="20" y2="0"
stroke-width="3" stroke="black"/>
<line x1="20" y1="0" x2="30" y2="5"
stroke-width="3" stroke="black"/>

</pattern>
</defs>

<g>
<ellipse cx="175" cy="100" rx="125" ry="60"
fill="url(#notes)" stroke="black" stroke-width="5"/>
</g>
</svg>

• 滤镜

　　也许 SVG 最强大的功能之一就是给图像添加了滤镜效果。这些效果复制了昂贵的图形操作程序中的许多效果，如光照效果和高斯模糊。对这些滤镜的完整讨论超出了本教程的范围，不过本页讨论了一些基本滤镜。

　　对 SVG 图像的滤镜操作包括创建一系列滤镜原语操作，该系列中每个原语操作都有自己的目的。例如，偏移滤镜按指定信息将源图像左移或右移以及上移或下移。高斯模糊原语操作按要求对源图像进行模糊处理。

　　源图像不必一定是实际的 SVG 图像。例如，它可以是前一个原语操作的结果。下面的代码将几个滤镜应用到前一页中显示的图案。

<?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>Filters</desc>
<defs>

<filter id="dropShadow" filterUnits="userSpaceOnUse"
x="0" y="0" width="400" height="200">
<feOffset in="SourceAlpha" dx="5" dy="5" result="offset"/>
<feGaussianBlur in="offset" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>

. . .
</defs>

<g>
<ellipse filter="url(#dropShadow)" cx="175" cy="100"
rx="125" ry="60"
fill="url(#notes)" stroke="black" stroke-width="5"/>
</g>
</svg>

　　首先，偏移滤镜将原始椭圆及其图案的 alpha 通道作为源（使用 in 属性）。alpha 通道由与图像中每个非白色像素对应的黑色像素组成，并且用 SourceAlpha 关键字指定。偏移原语操作完成处理然后将结果输出到一个由 result 属性指定的缓冲区（本例中的缓冲区名为 offset ）。

　　接下来，模糊原语操作接任。它将 in 参数指定的 offset 缓冲区的内容作为源。然后，它将其结果输出到 result 属性指定的名为 blur 的缓冲区。

　　这时，滤镜仅由经过偏移和模糊的图像组成。如果滤镜操作到此为止，那么页面上只出现模糊处理的图像。合并原语操作取得 blur 缓冲区的内容然后将它与原始源图形合并，正如当 in 属性引用 SourceGraphic 关键字时所指定的那样。

　　所有处理的结果是一幅具有阴影效果的原始图像：