SVG 入门教程(三) 绘制

原文出处: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 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
6.      
7.   <desc>Stroke and filldesc>  
8.   <defs>  
9.   
10.      <linearGradient id="lineGradient">  
11.         <stop offset="0%" stop-color="red" />  
12.         <stop offset="100%" stop-color="yellow" />  
13.      linearGradient>  
14.         
15.      <polygon id="lens" points="65,50 185,50 185,75, 150,100    
16.                                           100,100 65,75"   
17.              fill="pink" stroke="purple" stroke-width="4"  
18.              fill-opacity=".5"/>  
19.        
20. . . .    
21.   
22.   defs>  
23.      
24.   <g>  
25.   
26. . . .   
27.                     
28.     <line x1="65" y1="50" x2="310" y2="50"    
29.                           stroke="plum" stroke-width="2"/>       
30.         
31.                              
32.     <rect x="50" y="125" width="275" height="40" fill="orange"  
33.            stroke-width="6" stroke="url(#lineGradient)" />  
34.   
35.       
36.     <line x1="65" y1="190" x2="310" y2="190"    
37.                           stroke="purple" stroke-width="20"  
38.                           stroke-linecap="round"/>     
39.                              
40.                                  
41.     <polygon points="50,250 100,225 300,225 200,275" stroke="blue"  
42.           fill="none" stroke-width="10" stroke-linejoin="bevel" />    
43.               
44.   g>  
45. svg>  

 

颜色	<nobr>第 2 页（共5 页）</nobr>

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

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

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
5.      
6.   <desc>Colorsdesc>  
7.   <defs>  
8.   defs>  
9.      
10.   <g>  
11.   
12.      <text x="20" y="50" font-size="30">Colors can be specifiedtext>  
13.      <text x="20" y="100" font-size="30">by their   
14.         <tspan fill="rgb(255,0,0)">Rtspan>  
15.         <tspan fill="rgb(0,255,0)">Gtspan>  
16.         <tspan fill="rgb(0,0,255)">Btspan>  
17.      valuestext>  
18.      <text x="20" y="150" font-size="30">or by keywords such astext>  
19.      <text x="20" y="200" font-size="30">  
20.         <tspan fill="lightsteelblue">lightsteelbluetspan>,   
21.      text>  
22.      <text x="20" y="250" font-size="30">  
23.         <tspan fill="mediumseagreen">mediumseagreentspan>,   
24.      text>  
25.      <text x="20" y="300" font-size="30">and   
26.         <tspan fill="darkorchid">darkorchidtspan>.   
27.      text>  
28.   
29.   g>  
30. svg>  
31.   
32.   

渐变	<nobr>第 3 页（共5 页）</nobr>

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

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

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

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

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
5.      
6.   <desc>Colorsdesc>  
7.   <defs>  
8.      <linearGradient id="linear1">  
9.         <stop offset="0%" stop-color="red"/>  
10.         <stop offset="50%" stop-color="white"/>  
11.         <stop offset="100%" stop-color="blue"/>  
12.      linearGradient>  
13.      <linearGradient id="linear2" x1="100%" y1="0%" x2="0%"    
14.                                     y2="100%">  
15. . . .   
16.      linearGradient>  
17.      <linearGradient id="linear3" gradientTransform="rotate(90)">  
18. . . .   
19.      linearGradient>  
20.      <radialGradient id="radial1">  
21. . . .   
22.      radialGradient>  
23.      <radialGradient id="radial2" fx="225" fy="225">  
24.   
25. . . .   
26.      radialGradient>  
27.      <radialGradient id="radial3" cx="25%" cy="25%" r="75%">  
28. . . .   
29.      radialGradient>  
30.      
31.   defs>  
32.      
33.   <g>  
34.   
35.        
36.      <rect x="10" y="10" height="100" width="100" stroke="black"    
37.                                     fill="url(#linear1)"/>  
38.      <rect x="125" y="10" height="100" width="100" stroke="black"     
39.                                     fill="url(#linear2)"/>  
40.      <rect x="240" y="10" height="100" width="100" stroke="black"     
41.                                     fill="url(#linear3)"/>  
42.   
43.        
44.      <rect x="10" y="125" height="100" width="100" stroke="black"    
45.                                     fill="url(#radial1)"/>  
46.      <rect x="125" y="125" height="100" width="100" stroke="black"    
47.                                     fill="url(#radial2)"/>  
48.      <rect x="240" y="125" height="100" width="100" stroke="black"    
49.                                     fill="url(#radial3)"/>  
50.   
51.   g>  
52. svg>  

 

图案	<nobr>第 4 页（共5 页）</nobr>

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

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

请考虑下面的示例：

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
5.      
6.   <desc>Patternsdesc>  
7.   <defs>  
8.       <pattern id="notes" x="0" y="0" width="50" height="75"    
9.                    patternTransform="rotate(15)"    
10.                    patternUnits="userSpaceOnUse">  
11.             
12.          <ellipse cx="10" cy="30" rx="10" ry="5"/>  
13.          <line x1="20" y1="30" x2="20" y2="0"    
14.                    stroke-width="3" stroke="black"/>  
15.          <line x1="20" y1="0" x2="30" y2="5"    
16.                    stroke-width="3" stroke="black"/>  
17.          
18.       pattern>  
19.   defs>  
20.      
21.   <g>  
22.      <ellipse cx="175" cy="100" rx="125" ry="60"    
23.            fill="url(#notes)" stroke="black" stroke-width="5"/>  
24.   g>  
25. svg>  

 

滤镜	<nobr>第 5 页（共5 页）</nobr>

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

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

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

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
6.      
7.   <desc>Filtersdesc>  
8.   <defs>  
9.      
10.       <filter id="dropShadow" filterUnits="userSpaceOnUse"    
11.                       x="0" y="0" width="400" height="200">  
12.          <feOffset in="SourceAlpha" dx="5" dy="5" result="offset"/>  
13.          <feGaussianBlur in="offset" stdDeviation="5" result="blur"/>  
14.          <feMerge>  
15.            <feMergeNode in="blur"/>  
16.            <feMergeNode in="SourceGraphic"/>  
17.          feMerge>    
18.       filter>  
19.   
20. . . .   
21.   defs>  
22.      
23.   <g>  
24.      <ellipse filter="url(#dropShadow)" cx="175" cy="100"  
25.            rx="125" ry="60"    
26.            fill="url(#notes)" stroke="black" stroke-width="5"/>  
27.   g>  
28. svg>  

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

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

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

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