顏色

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

RGB

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

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

例子：

HSL

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

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

例子：

互相轉換的原理

互相轉換的原理挺復雜，就不多說。

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

透明度

設置顏色的透明度，有兩種方法：

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

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

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

漸變

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

線性漸變

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

漸變方向

方向	參數
水平	當 y1 和 y2 相等，而 x1 和 x2 不同時
垂直	當 x1 和 x2 相等，而 y1 和 y2 不同時
角形	當 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> 標簽的 id 屬性可為漸變定義一個唯一的名稱。
2. fill:url(#orange_red) 屬性把ellipse元素鏈接到此漸變。
3. <linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置。
4. 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。

注意：

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

名稱	單位	使用坐標系	描述
objectBoundingBox（默認值）	百分比	自身坐標系	基于漸變元素的長寬的百分比。
userSpaceOnUse	數值	原始坐標系	相對原始坐標系的數值（絕對值）。

為了讓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：不同的部分是橙色部分，這部分需要根據圖形在原始坐標系的位置算出來，還是比較麻煩。

徑向漸變

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

漸變方向

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

名稱	描述	默認值
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也有gradientUnits參數。

填充

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>

效果：

參數

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

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

使用位圖示例

<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

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。