SVG和canvas中是一樣的，都是使用標準的HTML/CSS中的顏色表示法，這些顏色都可以用於fill和stroke屬性。
基本上有下面這些定義顏色的方式：
1. 顏色名字：直接使用顏色名字red, blue, black...
2. rgba/rgb值： 這個也很好理解，例如#ff0000,rgba(255,100,100,0.5)。
3. 十六進位值： 用十六進位定義的顏色，例如#ffffff。
4. 漸變值：這個也跟canvas一樣，支援兩種漸層色：線性漸變，環形漸層。如下圖：
5. 圖案填滿：使用自訂的圖案作為填滿色。
前面幾款都很簡單，重點看下後面兩種填充色。
線性漸變
使用linearGradient元素即可定義線性漸變，每個漸層成分都使用stop元素定義。看下面的範例：
objectBoundingBox是預設值，它所使用的座標都是相對於物件包圍盒的(方形包圍盒，不是方形包圍盒的情況比較複雜，略過)，取值範圍是0到1。例如上例中的cx,cy的座標值(0.25,0.25)。意味著這個圓心是在包圍盒的左上角1/4處，半徑0.25意味著半徑長是物件方形包圍盒長的1/4，就像你們圖中看到的那樣。
userSpaceOnUse表示使用的是絕對座標，使用這個設定的時候，你必須確保漸變色和填滿的物件要保持在一個位置。
再看下面這個例子，注意gradientUnits屬性默認值是objectBoundingBox：
看效果圖就知道"焦點"的意思了。
此外，還有漸層元素還有一些變換的屬性，如gradientTransform，這個不是這裡的重點，後面會總結變換。
另外一個可能用到的屬性是spreadMethod屬性，這個屬性定義了漸變色到達它的終點時應該採取的行為。此屬性有3個可選值：pad(預設值),reflect,repeat。 pad不用說了，屬於自然過渡，漸變色結束以後，使用最後一個成員色直接渲染物件剩下的部分。 refect會讓漸層色繼續，只不過漸層色會反向繼續渲染，從最後一個顏色開始到第一個顏色這個順序渲染；等到再次到達漸變色終點時，再反序，如此這般指導對象填充完畢。 repeat也會讓漸層色繼續渲染，但不會反序，還是一遍又一遍從第一種顏色到最後一種顏色渲染。效果圖如下：
看一段重複渲染的代碼：
紋理填充
紋理填充也是一種流行的填充方式，在SVG中，可以使用pattern創建一個紋理，然後用這個pattern去填充別的對象。直接看範例：
範例看起來很簡單，由漸層色建立pattern，然後使用pattern
填滿矩形。這裡要注意：
1. 不同的瀏覽器填滿這個pattern的時候效果不一樣。
例如範例在FireFix和Chrome中效果一樣。但如果你把漸層色
和pattern定義在同一個defs組合裡，則FireFox仍然能正常渲染，
但是Chrome就辨識不了漸層色，只會用預設的黑色填滿。
2. pattern也需要定義id。
3. pattern也必須定義在defs中。
4. pattern的使用也是把url(#id)直接賦值給fill或stroke。
上面這些都是很簡單的，我們將重點來看範例中的座標表示情況，座標在pattern中比較複雜。
pattern中包含兩個相關屬性：patternUnits和patternContentUnits屬性；這兩個屬性的取值都還是只有2個：objectBoundingBox和userSpaceOnUse，這兩個值的含義上面以及講過了。這裡容易混淆的是這兩個屬性的預設值不同，但是當你理解這麼做的原因以後，你又會發現這麼做還真是有道理。
1. patternUnits屬性
這個屬性與Gradient的gradientUnits屬性是一樣的，預設採用objectBoundingBox。受這個屬性影響的屬性有x,y,width,height，這4個屬性分別定義了pattern的起點，寬高度。它們都採用了相對值，例子中想要在水平和垂直方向上都填充4次，所以width和height都設為了0.25。
2. patternContentUnits屬性
這個屬性的預設值正好相反，採用userSpaceOnUse。這個屬性描述了pattern中繪製的形狀(例如上面的rect,circle)的座標系統。也就是說在預設情況下，你在pattern中繪製的形狀和pattern本身的大小/位置使用了不一樣的座標系。考慮上面例子中的情況，我們想要填滿一個200*200的矩形，而且每個方向重複4次。這意味著每個pattern是50*50的，那麼pattern裡面的兩個長方形和一個圓形就是畫在這個50*50的長方形中。這樣我們就能理解上面pattern中的長方形和圓的座標了。此外，這個範例中的pattern為了居中，需要偏移10px後開始渲染，而這個值是受patternUnits屬性制約的，所以預設情況下，x,y值就為：10/200=0.05。
那麼pattern為什麼要這麼設定兩個屬性的預設值呢？
這是由使用者的使用決定的(以上面的例子來討論)：
第一種pattern樣式：我想這是大多數情況，所以處理成預設值：pattern是會隨著外面的圖形縮放而被拉伸，不管外圍方形是多大，pattern始終在兩個方向上都會被填充4次。但是pattern中包含的圖形是不會隨著外面被填充的方形縮放而進行拉伸的。雖然比較牽強，但就這麼理解吧。
第二種pattern樣式：pattern中的形狀也隨著外圍的形狀縮放進行拉伸。我們可以顯示的把patternContentUnits屬性的值也設為objectBoundingBox達到這個效果。例如把pattern的部分修改如下：
實用參考：
官方文件：http://www.w3.org/TR/SVG11/
腳本索引：http://msdn.microsoft.com/zh-cn/library /ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http: //www.chinasvg.com/
