漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。
SVG漸變主要有兩種類型：（Linear，Radial）。
一、SVG 線性漸變
<linearGradient>元素用於定義線性漸變。
<linearGradient>標籤必須嵌套在<defs>的內部。<defs>標籤是definitions的縮寫，可對諸如漸變之類的特殊元素進行定義。
線性漸變可以定義爲水平，垂直或角漸變。
/*y1和y2相等，而x1和x2不同時，可創建水平漸變。
當x1和x2相等，而y1和y2不同時，可創建垂直漸變。
當x1和x2不同，且y1和y2不同時，可創建角形漸變。*/
實例 1
定義水平線性漸變從黃色到紅色的橢圓形。
SVG代碼
<!DOCTYPE html>
<html>
<body style="background-color: aqua;">
<title>項目</title>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
運行效果：
代碼解析：
<linearGradient>標籤的id屬性可爲漸變定義一個唯一的名稱。
<linearGradient>標籤的X1，X2，Y1，Y2屬性定義漸變開始和結束位置。
漸變的顏色範圍可由兩種或多種顏色組成，每種顏色通過一個<stop>標籤來規定。offset屬性用來定義漸變的開始和結束位置。
填充屬性把 ellipse 元素鏈接到此漸變。
實例 2
定義一個垂直線性漸變從黃色到紅色的橢圓形。
SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
運行效果：
實例 3
定義一個橢圓形，水平線性漸變從黃色到紅色並添加一個橢圓內文本。
SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#000" font-size="45" font-family="Verdana"
x="150" y="86"> SVG</text>
</svg>
運行效果：
代碼解析：
<text> 元素是用來添加一個文本。
二、SVG 放射性漸變
<radialGradient>元素用於定義放射性漸變。
<radialGradient>標籤必須嵌套在<defs>的內部。<defs>標籤是definitions的縮寫，它可對諸如漸變之類的特殊元素進行定義。
實例 1
定義一個放射性漸變從白色到藍色橢圓。
SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
運行效果：
代碼解析：
<radialGradient>標籤的 id 屬性可爲漸變定義一個唯一的名稱。
CX，CY和r屬性定義的最外層圓和Fx和Fy定義的最內層圓。
漸變顏色範圍可以由兩個或兩個以上的顏色組成。每種顏色用一個<stop>標籤指定。offset屬性用來定義漸變色開始和結束。
填充屬性把ellipse元素鏈接到此漸變。
實例 2
定義放射性漸變從白色到藍色的另一個橢圓。
SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="20%" cy="30%" r="30%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
運行效果：
三、總結
本文基於HTML基礎，介紹了圖像SVG元素中的漸變效果，通過案例的分析，再實際項目中需要注意的點，對代碼進行解析。開發項目中遇到的難題，都提供了一些有效的解決辦法。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，纔可以理解的更加深刻。
代碼很簡單，希望能夠幫助讀者更好的去學習SVG。