一、顏色
我們之前使用英文來表示顏色並進行填充，比如：
-
<circle cx="800" cy="120" r="110" stroke="black" stroke-width="2" fill="red" />
這些顏色都很簡單所以用起來很方便，但是復雜的顏色就不行了，英文單詞無法描述某些顏色，所以現在我們需要使用將要學習的rgb和hsl來進行顏色表示。
1、RGB
RGB即Red、Green、Blue三種顏色的縮寫，RGB即使用紅、綠、藍三種顏色進行組合疊加來表示顏色的一種顏色標准。
RGB在網頁中的使用：
網頁顏色是以16進制代碼表示，一般格式為#DEFABC （字母范圍從A-F,數字從0-9 ）；如黑色，在網頁代碼中便是：#000000(在css編寫中可簡寫為#000)。當顏色代碼為#AABB11時，可以簡寫為#AB1表示，如#135與#113355表示同樣的顏色。此外RGB還有很多其他格式，比如：
我們發現，我們如果沒有取色工具，想要使用RGB表示我們想要的顏色我們需要進行大量的數據測試，且光憑肉眼判斷並不准確。
下面我們具體的來畫個圖：
-
<!DOCTYPE html> <html> <head> <title>rgbDemo</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgb(255,0,0)" /> <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,255,0)" /> <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" /> </svg> </body> </html>
2、HSL
HSL是另一種色彩模式是工業界的顏色標准，是通過對色相(H)、飽和度(S)、明度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，HSL即是代表色相，飽和度，明度三個通道的顏色。
同樣的我們可以簡單測試一下：
-
<!DOCTYPE html> <html> <head> <title>hslDemo</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="hsl(120,10%,10%)" /> <circle cx="200" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(200,50%,50%)" /> <circle cx="400" cy="200" r="110" stroke="black" stroke-width="2" fill="hsl(250,80%,80%)" /> </svg> </body> </html>
3、透明度
如果我們希望看到有透明度的色彩，只需要使用rgba()、hsla()或者opacity屬性即可，其中a表示透明度。
簡單的栗子：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>透明度</title> 5 </head> 6 <body> 7 <!--svg--> 8 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 9 <circle cx="300" cy="120" r="110" stroke="black" stroke-width="2" fill="rgba(255,0,0,0.5)" /> 10 <circle cx="240" cy="200" r="110" stroke="black" stroke-width="2" fill="hsla(120,100%,50%,0.5)" /> 11 <circle cx="380" cy="200" r="110" stroke="black" stroke-width="2" fill="rgb(0,0,255)" opacity="0.5"/> 12 </svg> 13 </body> 14 </html>
二、漸變
上面的某個元素都是整體顏色，下面我們來學習如何制作漸變色，就像這樣色的：
1、線性漸變
線性漸變就是按照直線的方向進行顏色漸變。在SVG中我們使用<linearGradient>標簽和<stop>標簽進行線性漸變處理：
下面我們看實例：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>線性漸變</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1"> 10 <stop offset="0" stop-color="red" /> 11 <stop offset="1" stop-color="blue" /> 12 </linearGradient> 13 </defs> 14 <rect x="50" y="50" width="300" height="150" fill="url(#grad1)" /> 15 </svg> 16 </body> 17 </html>
其中的標簽說明：
首先我們使用<defs>標簽進行預定義，即我們將描述的線性漸變先存放在<defs>標簽中以供使用。
然后是<linearGradient>標簽，這是真正描述線性漸變的標簽，其中x1,y1、x2,y2分別是漸變的起點和終點坐標，（0,0）表示圖形標簽的最左端，（1,1）表示圖形標簽的最右端。
<linearGradient>標簽中使用了<stop>標簽，這是用來設置漸變色的終點的。比如offset=0，stop-color="red"就表示最左端點顏色為red，然后offset=1，stop-color="blue"，就表示最右端顏色為blue，然后根據漸變起點坐標和終點坐標的設置（0，0）到（1，1），然后就形成了從最左端到最右端，紅色到藍色的線性漸變效果。
說明：<linearGradient>默認的坐標系不是世界坐標系，並且上面已經說明（0,0）表示圖形標簽的最左端，（1,1）表示圖形標簽的最右端。如果我們想使用世界坐標系或者說用戶坐標系作為漸變坐標，我們可以使用gradientUnits="userSpaceOnUse"屬性來進行設置。如：
-
<defs> <linearGradient id="grad1" x1="100" y1="100" x2="200" y2="200" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="red" /> <stop offset="1" stop-color="blue" /> </linearGradient> </defs>
2、徑向漸變
徑向漸變就是從給定起點進行圓形漸變。在SVG中使用<redialGradient>標簽和<stop>標簽進行徑向漸變處理：
類似線性漸變，我們只需要將<linearGradient>標簽換成<radialGradient>標簽就O了。
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>徑向漸變</title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <defs> <radialGradient id="grad1" cx="0.5" cy="0.5" r="0.5" fx="0.6" fy="0.4"> <stop offset="0" stop-color="black" /> <stop offset="0.3" stop-color="red" /> <stop offset="1" stop-color="yellow" /> </radialGradient> </defs> <circle cx="300" cy="200" r="150" fill="url(#grad1)" /> </svg> </body> </html>
其中cx,cy用來表示漸變焦點的坐標，而fx，fy可以使焦點偏移，r表示漸變半徑。
三、筆刷
筆刷很容易理解，相當於一個樣式容器，使用的使用我們只需要調用這個筆刷進行進行樣式填充。
直接看實例：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>筆刷</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <pattern id="p1" x="0" y="0" width="0.2" height="0.2"> 10 <circle cx="10" cy="10" r="5" fill="red"></circle> 11 <polygon points="30 0 60 50 0 50" fill="green"></polygon> 12 </pattern> 13 </defs> 14 <rect x="100" y="100" width="500" height="300" fill="url(#p1)" stroke="red" stroke-width="2px"></rect> 15 </svg> 16 </body> 17 </html>
其中，我們使用了<pattern>標簽，我們在標簽中繪制了一個圓表示太陽，一個三角形表示樹木，然后使用width=0.2和height=0.2來表示該筆刷所占標簽的比例為0.2，即橫向和縱向都平鋪5個筆刷樣式。
說明：類似上面使用的gradientUnits="userSpaceOnUse"屬性來改變坐標系，筆刷標簽<pattern>同樣可以這樣使用。即使用patternUnits="userSpaceOnUse"屬性：
-
<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> <defs> <pattern id="p1" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill="red"></circle> <polygon points="30 0 60 50 0 50" fill="green"></polygon> </pattern> </defs> <rect x="100" y="100" width="400" height="300" fill="url(#p1)" stroke="red" stroke-width="2px"></rect> </svg>
我們注意到<pattern>標簽中的圖形標簽<circle>、<rect>的坐標是世界坐標系，如果想要以標簽為參考的坐標系，即按比例表示坐標，那么我們可以使用patternUnits="objectBoundingBox"和patternContentUnits="objectBoundingBox"屬性來操作：
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>pattern</title> 5 </head> 6 <body> 7 <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1400" height="500"> 8 <defs> 9 <pattern id="p1" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" > 10 <circle fill="red" cx="0.2" cy="0.2" r="0.2"></circle> 11 <polygon points="0.1 0 0.15 0.16 0 0.15" fill="yellow"></polygon> 12 <polygon points="0.2 0.1 0.25 0.26 0.2 0.25" fill="yellow"></polygon> 13 </pattern> 14 </defs> 15 <rect x="100" y="100" width="400" height="300" fill="url(#p1)" stroke="green" stroke-width="2px"></rect> 16 </svg> 17 </body> 18 </html>
本文介紹的這些語法都很簡單，關鍵在於你如何使用這些操作來繪制想要的圖形。這需要大量嘗試以及至關重要的創造靈感，學會享受這種感覺。