SVG漸變可以定義為從一種顏色到另一種顏色的平滑過渡。在SVG中，有兩種類型的漸變,分別為：線性漸變和徑向漸變
SVG漸變是一種以不均勻的方式用顏色填充形狀的方法。這樣，形狀的填充或筆觸可以從一種顏色更改為另一種顏色。對(duì)于某些類型的圖形，這看起來確實(shí)不錯(cuò)。
這是將漸變應(yīng)用于形狀填充和筆觸的外觀：
第一個(gè)矩形始終具有相同的筆觸顏色，但是漸變填充顏色（淺到深綠色）。
第二個(gè)矩形在其筆觸和填充顏色上都應(yīng)用了漸變。
第三個(gè)矩形具有應(yīng)用于筆劃的漸變，但沒有填充。
第四個(gè)矩形已將漸變應(yīng)用于填充，但沒有筆觸。
有兩種類型的漸變：
線性漸變
徑向漸變
以下各節(jié)將介紹這兩個(gè)方面。
線性漸變從一種顏色到另一種顏色以線性方式均勻變化。在本文開頭，您已經(jīng)看到了一些簡單的線性漸變示例。
顏色可以垂直，水平或沿您定義的矢量變化。您也可以只用漸變填充形狀的一部分，而不是整個(gè)形狀。在繼續(xù)說明之前，這里有一些可視示例：
第一個(gè)矩形使用垂直漸變。第二個(gè)矩形使用水平漸變。第三個(gè)矩形使用對(duì)角漸變（朝右下角變暗）。第四個(gè)矩形僅用漸變填充矩形的右半部分。使用SVG的線性漸變，所有這些都是可能的。
線性漸變是使用<linearGradient>元素定義的。這是一個(gè)示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="10" y="10" width="75" height="100" rx="10" ry="10" style="fill:url(#myLinearGradient1); stroke: #005000; stroke-width: 3;" /></svg>測試看看?/?
正如您看到的，<linearGradient>-element嵌套在<defs>-element內(nèi)。漸變定義必須始終嵌套在<defs>-element內(nèi)，因此以后可以在SVG圖像中引用它們。在此示例中，線性漸變由CSS屬性（(fill:url(#myLinearGradient1))）中 <rect>其style屬性內(nèi)的-element 引用。
本<linearGradient>-元素有兩個(gè)嵌套<stop>-elements。的<linearGradient>-元素控制梯度的什么之前和梯度被施加后（的發(fā)生方向和spreadMethod屬性）。該<stop>-elements控制在漸變中使用的顏色，多遠(yuǎn)的形狀顏色啟停，加上漸變的不透明度。
這是<linearGradient>-element 的屬性的列表：
| 屬性 | 描述 |
| ID | 用于從形狀引用此漸變定義的唯一ID。 |
| x1，y1 | 向量的x1和y1（起點(diǎn)）定義了梯度的方向。指定為應(yīng)用漸變的形狀的x1，y1和x2，y2的百分比（％）。（注意：您應(yīng)該可以使用絕對(duì)數(shù)字，但這在瀏覽器中似乎不起作用）。 |
| x2，y2 | 向量的x2和y2（端點(diǎn)）定義了梯度的方向。 |
| spreadMethod | 此值定義漸變?nèi)绾卧谛螤钪袛U(kuò)展。共有3種可能的值：填充，重復(fù)和反射?！?pad”表示漸變的第一個(gè)/最后一個(gè)顏色在漸變之前和之后進(jìn)行填充（展開）?！爸貜?fù)”是指在整個(gè)形狀中重復(fù)漸變?！胺瓷洹笔侵笣u變?cè)谛螤钌戏从吵鰜怼H當(dāng)漸變不能完全填充形狀時(shí)才使用散布方法（請(qǐng)參見元素的offset
屬性<stop>）。 |
| gradientTransform | 您可以在應(yīng)用漸變之前對(duì)其進(jìn)行變換（例如旋轉(zhuǎn)）。有關(guān)更多詳細(xì)信息，請(qǐng)參見 SVG轉(zhuǎn)換。 |
| gradientUnits | 設(shè)置是否要使用視圖框（'userSpaceOnUse'）或要應(yīng)用漸變的形狀來計(jì)算x1，y1和x2，y2。 |
| xlink：href | 另一個(gè)漸變的ID，此漸變應(yīng)從該ID“繼承”其屬性。換句話說，對(duì)于任何屬性，如果在此漸變中未設(shè)置任何屬性值，則參考漸變的屬性值將是該漸變的默認(rèn)值。 |
這是<stop>元素屬性的列表：
| 屬性 | 描述 |
| offset | 該顏色開始（如果漸變的第一種顏色）或停止（如果漸變的最后一種顏色）到達(dá)形狀的距離。指定為應(yīng)用漸變的形狀的百分比（實(shí)際上是漸變矢量）。例如，10％表示顏色應(yīng)開始/停止10％的形狀。 |
| stop-color | 該停止點(diǎn)的顏色。漸變的顏色從/變?yōu)椤?/td> |
| 此停止點(diǎn)的顏色的不透明度。如果不透明度從具有1的一個(gè)停止點(diǎn)變?yōu)榫哂?的另一個(gè)停止點(diǎn)，則顏色將逐漸變得越來越透明。 |
記住所有這些屬性描述不容易。這個(gè)創(chuàng)建了一個(gè)圖像來說明這些屬性的含義：
這是與圖像匹配的線性漸變定義：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="10%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="30%" stop-color="#006600" stop-opacity="1"/> <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/> <stop offset="90%" stop-color="#000099" stop-opacity="1"/> </linearGradient> </defs> <rect x="10" y="10" width="500" height="50" rx="10" ry="10" style="fill:url(#myLinearGradient1); stroke: #005000; stroke-width: 3;" /> </svg>測試看看?/?
第一個(gè)停止顏色是#00cc00，將從10％開始進(jìn)入矩形。由于spreadMethod被設(shè)置為“墊”，第一顏色也被填充到矩形之前的第一站顏色（0-10％）。
從第一個(gè)停止色的10％顏色變?yōu)榈诙€(gè)停止色#006600，到達(dá)矩形的30％。
從第二個(gè)終止色的30％變?yōu)榈谌齻€(gè)終止色#cc0000（紅色），到達(dá)矩形的70％。
從第三個(gè)停止色的70％變?yōu)榈谒膫€(gè)和最后一個(gè)停止色#000099（藍(lán)色），達(dá)到90％。從90％到矩形的其余部分，最后一個(gè)終止色（#000099）被填充到矩形中，因?yàn)?code>spreadMethod
該<linearGradient>元素的屬性設(shè)置為“ pad”。
徑向漸變是其中顏色呈圓形而非線性變化的漸變。這是一個(gè)示例圖像：
正如您看到的，顏色現(xiàn)在以圓形方式變化。最后三個(gè)（綠色）矩形僅在最淺綠色的輻射中心發(fā)生變化。第一個(gè)綠色矩形具有從矩形中心散布的顏色。第二個(gè)矩形使用矩形的頂部中間。第三個(gè)矩形以左上角為中心。
徑向漸變是使用<radialGradient>元素定義的。這是一個(gè)示例：
<svg width="512" height="120"> <defs> <radialgradient id="myRadialGradient4" fx="5%" fy="5%" r="65%" spreadmethod="pad"><stop offset="0%" stop-color="#00ee00" stop-opacity="1"></stop> <stop offset="100%" stop-color="#006600" stop-opacity="1"></stop></radialgradient></defs> <rect x="340" y="10" width="100" height="100" rx="10" ry="10" style="fill:url(#myRadialGradient4); stroke: #005000; stroke-width: 3;"></rect> </svg>測試看看?/?
該SVG代碼實(shí)際上定義了上面示例中顯示的第四個(gè)矩形。注意如何<stop>像線性漸變一樣使用元素定義顏色（有關(guān)說明，請(qǐng)參見線性漸變）。
這是<radialGradient>
元素的屬性的列表：
| 屬性 | 描述 |
| ID | 用于從形狀引用此漸變定義的唯一ID。 |
| cy，cy | 徑向漸變中心的x和y。指定為要填充的形狀的寬度和高度的百分比。如果省略，則默認(rèn)均為50％。 |
| fx，fy | 徑向漸變焦點(diǎn)的x和y。指定為要填充的形狀的寬度和高度的百分比。如果省略，則默認(rèn)均為50％。 注意：Firefox 3.0.5的值似乎低于5％。 |
| [R | 漸變的半徑。 |
| spreadMethod | 此值定義漸變?nèi)绾卧谛螤钪袛U(kuò)展。共有3種可能的值：填充，重復(fù)和反射?！?pad”表示漸變的第一個(gè)/最后一個(gè)顏色在漸變之前和之后進(jìn)行填充（展開）?！爸貜?fù)”是指在整個(gè)形狀中重復(fù)漸變?！胺瓷洹笔侵笣u變?cè)谛螤钌戏从吵鰜怼H當(dāng)漸變不能完全填充形狀時(shí)才使用散布方法（請(qǐng)參見元素的offset
屬性<stop>）。 |
| gradientTransform | 您可以在應(yīng)用漸變之前對(duì)其進(jìn)行變換（例如旋轉(zhuǎn)）。有關(guān)常規(guī)轉(zhuǎn)換的更多詳細(xì)信息，請(qǐng)參見SVG轉(zhuǎn)換。 |
| gradientUnits | 設(shè)置是否要使用視圖框（'userSpaceOnUse'）或要應(yīng)用漸變的形狀來計(jì)算x1，y1和x2，y2。您通?？梢院雎源藢傩浴?/td> |
| xlink：href | 另一個(gè)漸變的ID，此漸變應(yīng)從該ID“繼承”其屬性。換句話說，對(duì)于任何屬性，如果在此漸變中未設(shè)置任何屬性值，則參考漸變的屬性值將是該漸變的默認(rèn)值。 |
徑向漸變的中心是圓形顏色擴(kuò)散的中心。如果將徑向漸變描述為一個(gè)圓，則cx和cy標(biāo)記該圓的中心。
徑向漸變的焦點(diǎn)是彩色輻射的“角度”。如果您將徑向漸變視為一盞燈，則焦點(diǎn)將決定來自燈的光線與形狀碰撞的角度。50％，50％表示直接從上方。5％，5％表示從左上角向下。漸變看起來有點(diǎn)像光源照到您的形狀。
在正確設(shè)置漸變之前，您很可能必須先嘗試漸變的中心和焦點(diǎn)。我知道我這樣做是為了創(chuàng)建這些簡單的示例。
您可以使用標(biāo)準(zhǔn)SVG轉(zhuǎn)換功能來轉(zhuǎn)換漸變。這樣做使用gradientTransform屬性，無論是在<linearGradient>和 <radialGradient>。這是一個(gè)示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"gradientTransform="rotate(45)" > <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="10" y="10" width="75" height="100" rx="10" ry="10" style="fill:url(#myLinearGradient1); stroke: #005000; stroke-width: 3;" /></svg>測試看看?/?
本示例定義了帶有gradientTransform() 屬性的線性漸變，該漸變將漸變旋轉(zhuǎn)45度。通常，漸變會(huì)將顏色從上到下分級(jí)，但是現(xiàn)在通過旋轉(zhuǎn)，它從右上角到左下角。
運(yùn)行后圖像效果：