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 | 定義對漸變座標系統的額外變換 |