顏色

RGB和HSL都是CSS3支持的顏色表示方法，一般普遍使用是RGB。PS：HSL瀏覽器兼容。

RGB

RGB即是代表紅、綠、藍三個通道的顏色，通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。

表示方式	取值范圍	優(yōu)點	缺點
rgb(r, g, b)	[0, 255] 每個分量	顯示器容易分析， 目前的顯示器大都是采用了RGB顏色標(biāo)準(zhǔn)	不符合人類描述顏色的習(xí)慣
#rrggbb	00 - FF 十六進制正整數(shù)

例子：

HSL

HSL即是代表色相，飽和度，亮度三個通道的顏色，通過對色相(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。

表示方式	取值范圍	優(yōu)點
hsl(h, s%, l%)	h：[0, 359] s，l：[0, 100]	符合人類描述顏色的習(xí)慣

例子：

互相轉(zhuǎn)換的原理

互相轉(zhuǎn)換的原理挺復(fù)雜，就不多說。

用js實現(xiàn)RGB與HSL的互相轉(zhuǎn)換，可查看：http://www.zhangxinxu.com/wordpress/2010/03/javascript-hex-rgb-hsl-color-convert/

透明度

設(shè)置顏色的透明度，有兩種方法：

1. rgb(r, g ,b ,a)和hsl(h, s%, l%, a) 表示帶透明度的顏色。

2. opacity屬性表示元素的透明度。

PS：a和opacity的取值范圍：[0, 1]

漸變

漸變是一種從一種顏色到另一種顏色的平滑過渡，兩種主要漸變是線性漸變和徑向漸變。

線性漸變

<linearGradient> 可用來定義 SVG 的線性漸變，主要是定義方向和顏色。
<linearGradient> 標(biāo)簽一般嵌套在 <defs> 的內(nèi)部。 （SVG的<defs>元素用于預(yù)定義（不會顯示）一個元素使其能夠在SVG圖像中重復(fù)使用。）

漸變方向

方向	參數(shù)
水平	當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時
垂直	當(dāng) x1 和 x2 相等，而 y1 和 y2 不同時
角形	當(dāng) x1 和 x2 不同，且 y1 和 y2 不同時

示例：

<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%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="190" rx="80" ry="50"/>
</svg>

效果：

代碼解析：

1. <linearGradient> 標(biāo)簽的 id 屬性可為漸變定義一個唯一的名稱。
2. fill:url(#orange_red) 屬性把ellipse元素鏈接到此漸變。
3. <linearGradient> 標(biāo)簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結(jié)束位置。
4. 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置。

注意：

gradientUnits，它定義了漸變使用的坐標(biāo)單位。這個屬性有2個可用值：userSpaceOnUse和objectBoundingBox（默認(rèn)值）。

名稱	單位	使用坐標(biāo)系	描述
objectBoundingBox（默認(rèn)值）	百分比	自身坐標(biāo)系	基于漸變元素的長寬的百分比。
userSpaceOnUse	數(shù)值	原始坐標(biāo)系	相對原始坐標(biāo)系的數(shù)值（絕對值）。

為了讓userSpaceOnUse的效果跟objectBoundingBox一致，那上面代碼需變成

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <linearGradient id="orange_red" x1="120" y1="120" x2="300" y2="120" gradientUnits="userSpaceOnUse">
               <stop offset="0%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="200" rx="80" ry="50"/>
</svg>

PS：不同的部分是橙色部分，這部分需要根據(jù)圖形在原始坐標(biāo)系的位置算出來，還是比較麻煩。

徑向漸變

<radialGradient> 可用來定義 SVG 的徑向漸變，主要是定義方向和顏色。

漸變方向

cx、cy 和 r 屬性定義外圈，而 fx和fy 定義內(nèi)圈（可認(rèn)為是往哪聚焦） 。

名稱	描述	默認(rèn)值
cx	漸變的中心點x位置	50％
cy	漸變的中心點y位置	50％
r	漸變的半徑	50％
fx	漸變的焦點	0％
fy	漸變的焦點	0％

示例：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <radialGradient id="orange_red" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" stop-color="blue"/>
               <stop offset="50%" stop-color="orange"/>
               <stop offset="100%" stop-color="red"/>
          </radialGradient>
     </defs>
     <circle cx="200" cy="200" r="80"/>
</svg>

效果：

PS：radialGradient也有g(shù)radientUnits參數(shù)。

填充

SVG的填充可以用一個SVG元素，也可以是位圖圖像，通過<pattern>元素在x軸或y軸方向以固定的間隔平鋪。

示例：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <pattern id="grid" x="100" y="100" width="0.2" height="0.2">
               <circle cx="10" cy="10" r="5" fill="red"></circle>
               <polygon points="30 10 60 50 0 50" fill="green"></polygon>
          </pattern>
     </defs>
    <rect x="100" y="100" width="400" height="300" fill="url(#grid)" stroke="blue"></rect>
</svg>

效果：

參數(shù)

名稱	描述	默認(rèn)值
x	填充圖案的x偏移量，來自左上角	0
y	填充圖案的y偏移量，來自左上角	0
width	填充圖案的寬度	0
height	填充圖案的高度	0
patternUnits	設(shè)置pattern的使用單位	objectBoundingBox
patternContentUnits	設(shè)置pattern內(nèi)圖案的使用單位	userSpaceOnUse

PS：patternUnits和patternContentUnits的取值都一樣，userSpaceOnUse和objectBoundingBox，只不過默認(rèn)值不一樣。

使用位圖示例

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <pattern id="pattern-image" x="0" y="0" width="0.2" height="0.2">
               <image xlink:href="face.gif" x="0" y="0" width="50" height="50"></image>
          </pattern>
     </defs>
    <rect x="100" y="100" width="400" height="300" fill="url(#pattern-image)" stroke="blue"></rect>
</svg>

效果：

代碼地址

想看文章的代碼示例，可以到我的Github下載：https://github.com/codingforme/code-learn/tree/master/svg

參考文獻

1.http://www.w3school.com.cn/svg/svg_grad_linear.asp

2.http://www.cnblogs.com/lhweb15/p/5489699.html

3.https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5971781.html

總結(jié)

以上是生活随笔為你收集整理的SVG颜色、渐变和填充的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。