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