（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（水平渐变）：

<?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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>

代码解释：

• <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
• fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
• <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>

放射性渐变

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

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

实例1（中心渐变）：

<?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="50%" cy="50%" 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>

代码解释：

　　<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>

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

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

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

    <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。也就是不是根据父标签来定义比例。