上一節我們講的是線性漸變，本節我們來學習徑向漸變。徑向漸變可以理解爲以某一點爲圓心，顏色值沿半徑方向進行漸變。
如何創建徑向漸變
我們可以通過 <radialGradient> 元素創建一個 SVG 的徑向漸變。徑向漸變的使用其實和線性漸變差不多，也是嵌套在 <defs> 元素中使用，在使用時需要定義一個唯一的 id 名稱，然後通過 fill 屬性引用。
示例：
定義一個徑向漸變的圓：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<radialGradient id="radia" cx="50%" cy="50%" r="40%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(110, 244, 248); "/>
<stop offset="70%" style="stop-color:rgb(212, 129, 194); "/>
<stop offset="100%" style="stop-color:rgb(243, 204, 132); "/>
</radialGradient>
</defs>
<circle fill="url(#radia)" cx="200" cy="120" r="100" />
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
上述代碼中在 <radialGradient> 元素中定義了一個id 屬性，方便後面的引用。<radialGradient> 內通過 <stop> 元素定義了三個顏色，<stop> 元素中的三個屬性在上一節中講到過。
除此之外， <radialGradient> 元素中的參數和 <linearGradient> 元素中的屬性還是有一些不同，如下所示：
| 屬性 | 描述 |
|---|---|
| r | 圓的半徑 |
| cx | 漸變的中心點 x 座標，要移動漸變的位置，可以改變這個值 |
| cy | 漸變的中心點 y 座標，要移動漸變的位置，可以改變這個值 |
| fx | 漸變的焦點 x 座標，可以用於移動漸變第一個顏色結點的位置 |
| fy | 漸變的焦點 y 座標，可以用於移動漸變第一個顏色結點的位置 |
| fr | 定義徑向漸變的焦點的半徑，默認值爲 0% |
示例：
例如創建一個橢圓漸變：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="300">
<defs>
<radialGradient id="radia" cx="40%" cy="50%" r="50%" fx="40%" fy="50%" >
<stop offset="0%" style="stop-color:rgb(206, 88, 108); "/>
<stop offset="50%" style="stop-color:rgb(80, 181, 206); "/>
<stop offset="70%" style="stop-color:rgb(233, 199, 125); "/>
<stop offset="90%" style="stop-color:rgb(189, 138, 236); "/>
<stop offset="100%" style="stop-color:rgb(152, 252, 190); "/>
</radialGradient>
</defs>
<ellipse fill="url(#radia)" cx="250" cy="100" rx="150" ry="100"></ellipse>
</svg>
</body>
</html>
在瀏覽器中的演示效果： 
這個橢圓漸變中定義了五個顏色，然後通過 cx 和 cy 確定漸變中心點位置，fx 和 fy 確定漸變第一個顏色的結點的位置。