（3）SVG颜色、渐变和笔刷

3.1 RGB和HSL

　　※ 都是CSS3支持的颜色方法

　　※ 互相转换的原理

 

 

 

 每次只需修改一个参数

 

3.2 渐变 

　　※ 使图形更丰满

　　※线性渐变和径向渐变

线性渐变（W3C标准）：

<linearGradient> 可用来定义 SVG 的线性渐变。

<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

 实例1（水平渐变）：

 1 <?xml version="1.0" standalone="no"?>
 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 
 5 <svg width="100%" height="100%" version="1.1"
 6 xmlns="http://www.w3.org/2000/svg">
 7 
 8 <defs>
 9 <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
10 <stop offset="0%" style="stop-color:rgb(255,255,0);
11 stop-opacity:1"/>
12 <stop offset="100%" style="stop-color:rgb(255,0,0);
13 stop-opacity:1"/>
14 </linearGradient>
15 </defs>
16 
17 <ellipse cx="200" cy="190" rx="85" ry="55"
18 style="fill:url(#orange_red)"/>
19 
20 </svg>

代码解释：

• <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
• fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
• <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

 实例2（垂直渐变）：

 1 <?xml version="1.0" standalone="no"?>
 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 
 5 <svg width="100%" height="100%" version="1.1"
 6 xmlns="http://www.w3.org/2000/svg">
 7 
 8 <defs>
 9 <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
10 <stop offset="0%" style="stop-color:rgb(255,255,0);
11 stop-opacity:1"/>
12 <stop offset="100%" style="stop-color:rgb(255,0,0);
13 stop-opacity:1"/>
14 </linearGradient>
15 </defs>
16 
17 <ellipse cx="200" cy="190" rx="85" ry="55"
18 style="fill:url(#orange_red)"/>
19 
20 </svg>

放射性渐变

　　<radialGradient> 用来定义放射性渐变。

　　<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

实例1（中心渐变）：

 1 <?xml version="1.0" standalone="no"?>
 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 
 5 <svg width="100%" height="100%" version="1.1"
 6 xmlns="http://www.w3.org/2000/svg">
 7 
 8 <defs>
 9 <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
10 fx="50%" fy="50%">
11 <stop offset="0%" style="stop-color:rgb(200,200,200);
12 stop-opacity:0"/>
13 <stop offset="100%" style="stop-color:rgb(0,0,255);
14 stop-opacity:1"/>
15 </radialGradient>
16 </defs>
17 
18 <ellipse cx="230" cy="200" rx="110" ry="100"
19 style="fill:url(#grey_blue)"/>
20 
21 </svg>

 

代码解释：

　　<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

实例2（偏左侧放射性渐变）：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>

 

 1     <defs>
 2         <pattern id="pattern2" x="0" y="0" width="0.3" height="0.3" pattern="userSpaceOnUse" patternUnits="objectBoundingBox">
 3             <circle cx="10" cy="10" r="5" fill="rgba(255,0,0,0.7)"></circle>
 4             <polygon points="30 10 60 50 0 50" fill="rgba(0,0,255,0.7)"></polygon>
 5         </pattern>
 6     </defs>

 7     <rect x="400" y="300" width="100" height="100" fill="url(#pattern2)" stroke="rgba(0,255,0,0.7)"></rect>
 8 
 9     <defs>
10         <pattern id="pattern3" x="0" y="0" width="0.3" height="0.3" pattern="objectBoundingBox" patternUnits="objectBoundingBox">
11             <circle cx="10" cy="10" r="5" fill="rgba(255,0,0,0.7)"></circle>
12             <polygon points="30 10 60 50 0 50" fill="rgba(0,0,255,0.7)"></polygon>
13         </pattern>
14     </defs>

15     <rect x="500" y="300" width="100" height="100" fill="url(#pattern3)" stroke="rgba(0,255,0,0.7)"></rect>

代码解释：

　　※ pattern 笔刷。 笔刷用来定义一个可以在boundingbox上重复铺满的图案集合。

　　※ patternUnits指定pattern在rect里的单位，

　　※ patternContentUnits指定pattern的内容的单位是基于rect的

　　※ patternUnits patternContentUnits 可取值 userSpaceOnUse

　　※ objectBoundingBox objectBoundingBox 模式下的比例均为相对于boundingbox。也就是不是根据父标签来定义比例。

 

转载于:https://www.cnblogs.com/ilaozhao/p/7887661.html