漸變是一種從一種顔色到另一種顔色的平滑過渡。另外，可以把多個顔色的過渡應用到同一個元素上。
SVG漸變主要有兩種類型：（Linear，Radial）。
一、SVG 線性漸變
元素用于定義線性漸變。
标簽必須嵌套在的内部。标簽是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> 運作效果：
代碼解析：
- 标簽的id屬性可為漸變定義一個唯一的名稱。
- 标簽的X1，X2，Y1，Y2屬性定義漸變開始和結束位置。
- 漸變的顔色範圍可由兩種或多種顔色組成，每種顔色通過一個标簽來規定。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 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> 元素是用來添加一個文本。
二、SVG 放射性漸變
元素用于定義放射性漸變。
标簽必須嵌套在的内部。标簽是definitions的縮寫，它可對諸如漸變之類的特殊元素進行定義。
定義一個放射性漸變從白色到藍色橢圓。
<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> - 标簽的 id 屬性可為漸變定義一個唯一的名稱。
- CX，CY和r屬性定義的最外層圓和Fx和Fy定義的最内層圓。
- 漸變顔色範圍可以由兩個或兩個以上的顔色組成。每種顔色用一個标簽指定。offset屬性用來定義漸變色開始和結束。
- 填充屬性把ellipse元素連結到此漸變。
定義放射性漸變從白色到藍色的另一個橢圓。
<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。
想學習更多Python網絡爬蟲與資料挖掘知識，可前往專業網站：
http://pdcfighting.com/![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)