SVG 徑向漸變
SVG 徑向漸變 - <radialGradient>
<radialGradient> 元素用於定義徑向漸變（從一種顏色到另一種顏色、從一個方向到另一個方向的圓形過渡）。
漸變定義放在 <defs> 或 <svg> 元素中。<defs> 元素是“定義”的縮寫，包含特殊元素（如漸變）的定義。
每個漸變都必須有一個 id 屬性來標識漸變。然後圖形/影像指向要使用的漸變。
徑向漸變 1
一個帶有從紅色到藍色徑向漸變的橢圓
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
自己動手試一試 »
程式碼解釋
<radialGradient>元素的id屬性定義了漸變的唯一名稱cx和cy屬性定義了徑向漸變結束圓的 x 和 y 位置fx和fy屬性定義了徑向漸變起始圓的 x 和 y 位置r屬性定義了徑向漸變結束圓的半徑- 漸變的顏色由兩個或多個
<stop>元素定義 <stop>中的offset屬性定義了漸變停止點的位置<stop>中的stop-color屬性定義了漸變停止點的顏色<ellipse>元素的fill屬性將該元素指向“grad1”漸變
徑向漸變 2
一個帶有從紅色到綠色再到藍色徑向漸變的橢圓
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
自己動手試一試 »
徑向漸變 3
一個帶有從紅色到藍色徑向漸變的橢圓（這裡我們將結束圓的 x 和 y 位置設定為 25%）
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad3" cx="25%" cy="25%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
自己動手試一試 »
徑向漸變 4 - spreadMethod="reflect"
一個帶有從紅色到藍色徑向漸變和 spreadMethod="reflect" 的橢圓
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
自己動手試一試 »
徑向漸變 5 - spreadMethod="repeat"
一個帶有從紅色到藍色徑向漸變和 spreadMethod="repeat" 的橢圓
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
自己動手試一試 »
徑向漸變 6
定義另一個帶有從紅色到藍色徑向漸變的橢圓
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="red" stop-opacity="0" />
<stop offset="100%" stop-color="blue" stop-opacity="1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>
自己動手試一試 »
程式碼解釋
<stop>中的stop-opacity屬性定義了漸變停止點顏色的不透明度
SVG <radialGradient> 屬性
| Attribute | 描述 |
|---|---|
| id | 必需。定義 <radialGradient> 元素的唯一 id |
| cx | 徑向漸變結束圓的 x 位置。預設為 50% |
| cy | 徑向漸變結束圓的 y 位置。預設為 50% |
| fr | 徑向漸變起始圓的半徑。預設為 0% |
| fx | 徑向漸變起始圓的 x 位置。預設為 50% |
| fy | 徑向漸變起始圓的 y 位置。預設為 50% |
| r | 徑向漸變結束圓的半徑。預設為 50% |
| spreadMethod | 定義漸變的擴散方法。可能的值：“pad”、“reflect”、“repeat”。預設為“pad” |
| href | 定義對另一個 <radialGradient> 元素的引用，該元素將用作模板 |
| gradientUnits | 定義 cx、cy、r、fx、fy、fr 的座標系統。可能的值：“userSpaceOnUse”和“objectBoundingBox”。預設為“objectBoundingBox” |
| gradientTransform | 定義對漸變座標系統的額外變換 |
