SVG顏色、漸變和填充

顏色

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" style="fill:url(#orange_red)"/>
</svg>

效果：

代碼解析：

1. <linearGradient> 標籤的 id 屬性可爲漸變定義一個惟一的名稱。
2. fill:url(#orange_red) 屬性把ellipse元素連接到此漸變。
3. <linearGradient> 標籤的 x一、x二、y一、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" style="fill:url(#orange_red)"/>
</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" style="fill:url(#orange_red)"/>
</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