原文出处:https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html
笔划与填充 | <nobr>第 1 页(共5 页)</nobr> |
整个教程到目前为止,示例已经演示了围绕对象的笔划或线以及对象内部区域的填充。这些属性实际上还有子属性,也可以设置子属性来创建不同的效果。这些属性包括:
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"?>
- "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 filldesc>
- <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"/>
- <rect x="50" y="125" width="275" height="40" fill="orange"
- stroke-width="6" stroke="url(#lineGradient)" />
- <line x1="65" y1="190" x2="310" y2="190"
- stroke="purple" stroke-width="20"
- stroke-linecap="round"/>
- <polygon points="50,250 100,225 300,225 200,275" stroke="blue"
- fill="none" stroke-width="10" stroke-linejoin="bevel" />
- g>
- svg>
颜色 | <nobr>第 2 页(共5 页)</nobr> |
颜色对于 SVG 图像是极其重要的。单个颜色可以直接使用它们的 RGB 值指定,或者使用差不多 150 个颜色关键字中的一个来间接指定,该关键字也引用 RGB 值。
RGB 值在 0 到 255 数值范围内指定一种颜色的红、绿、蓝成分的相对亮度。例如:
- xml version="1.0"?>
- "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>Colorsdesc>
- <defs>
- defs>
- <g>
- <text x="20" y="50" font-size="30">Colors can be specifiedtext>
- <text x="20" y="100" font-size="30">by their
- <tspan fill="rgb(255,0,0)">Rtspan>
- <tspan fill="rgb(0,255,0)">Gtspan>
- <tspan fill="rgb(0,0,255)">Btspan>
- valuestext>
- <text x="20" y="150" font-size="30">or by keywords such astext>
- <text x="20" y="200" font-size="30">
- <tspan fill="lightsteelblue">lightsteelbluetspan>,
- text>
- <text x="20" y="250" font-size="30">
- <tspan fill="mediumseagreen">mediumseagreentspan>,
- text>
- <text x="20" y="300" font-size="30">and
- <tspan fill="darkorchid">darkorchidtspan>.
- text>
- g>
- svg>
渐变 | <nobr>第 3 页(共5 页)</nobr> |
正象您在前面的示例中看到的,渐变提供了将颜色混合在一起的能力。渐变有两种。对于每种情况,代码都指定沿着渐变向量的颜色“停止”或颜色点,渐变到这些点就成为某种颜色。例如,指定红色在 0% 停止,白色在 50% 停止而蓝色在 100% 停止的渐变将逐渐由红色变为白色再变为蓝色,白色在渐变向量的中心。
可以推断或者直接指定渐变向量。以线性渐变为例,假设它从要填充区域的左缘开始到右缘结束。可以用 x1、y1、x2 和 y2 属性更改这一向量。也可以(依照)使用 gradientTransform
属性对这一向量进行变换。
以放射性渐变为例,渐变基于一个圆,可以用 cx
、cy
和 r
属性调整外部圆(渐变向量终止的地方)的圆心和半径。可以使用 fx
和 fy
属性调整焦点(渐变向量起始的地方)。
考虑下面这些线性和放射性渐变的示例:
- xml version="1.0"?>
- "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>Colorsdesc>
- <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>
- <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)"/>
- <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>
图案 | <nobr>第 4 页(共5 页)</nobr> |
用图案填充对象在很多地方与用渐变填充类似。两种情况下,都定义填充然后从填充属性内部调用它。
定义图案与定义任何其它作为 SVG 图像一部分出现的对象相似。它有位置、高度和宽度,通常还有一个或多个包含的对象。位置是基于整个文档还是基于正在被填充的对象由 patternUnits
属性确定,该属性可以设置为 objectBoundingBox
或 userSpaceOnUse
;这些属性分别设置基于对象和文档的坐标。与渐变相似,可以变换图案(使用 patternTransform
属性)。
请考虑下面的示例:
- xml version="1.0"?>
- "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>Patternsdesc>
- <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>
滤镜 | <nobr>第 5 页(共5 页)</nobr> |
也许 SVG 最强大的功能之一就是给图像添加了滤镜效果。这些效果复制了昂贵的图形操作程序中的许多效果,如光照效果和高斯模糊。对这些滤镜的完整讨论超出了本教程的范围,不过本页讨论了一些基本滤镜。
对 SVG 图像的滤镜操作包括创建一系列滤镜原语操作,该系列中每个原语操作都有自己的目的。例如,偏移滤镜按指定信息将源图像左移或右移以及上移或下移。高斯模糊原语操作按要求对源图像进行模糊处理。
源图像不必一定是实际的 SVG 图像。例如,它可以是前一个原语操作的结果。下面的代码将几个滤镜应用到前一页中显示的图案。
- xml version="1.0"?>
- "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>Filtersdesc>
- <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
关键字时所指定的那样。
所有处理的结果是一幅具有阴影效果的原始图像: