SVG 線性漸變
SVG 漸變
漸變是從一種顏色平滑過渡到另一種顏色。此外，可以將幾種顏色過渡應用於同一元素。
SVG 中有兩種型別的漸變
- 線性漸變 - 使用
<linearGradient>定義 - 徑向漸變 - 使用
<radialGradient>定義
漸變定義放在 <defs> 或 <svg> 元素中。<defs> 元素是“定義”的縮寫，包含特殊元素（如漸變）的定義。
每個漸變必須有一個 id 屬性來標識漸變。然後圖形/影像指向要使用的漸變。
SVG 線性漸變 - <linearGradient>
<linearGradient> 元素用於定義線性漸變（從一種顏色到另一種顏色，從一個方向到另一個方向的線性過渡）。
<linearGradient> 元素通常巢狀在 <defs> 元素中。
線性漸變可以定義為水平、垂直或角度漸變
- 水平線性漸變（這是預設值）從左到右（其中 x1 和 x2 不同，y1 和 y2 相等）
- 垂直線性漸變從上到下（其中 x1 和 x2 相等，y1 和 y2 不同）
- 當 x1 和 x2 不同且 y1 和 y2 不同時，會建立角度線性漸變
水平線性漸變
一個橢圓，帶有從黃色到紅色的水平線性漸變
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
自己動手試一試 »
程式碼解釋
<linearGradient>元素的id屬性定義了漸變的唯一名稱<linearGradient>元素的x1、x2、y1、y2屬性定義了漸變的 x 和 y 起始點和結束點- 漸變的顏色由兩個或多個
<stop>元素定義 <stop>中的stop-color屬性定義了漸變停止點的顏色<stop>中的offset屬性定義了漸變停止點的放置位置<ellipse>元素的fill屬性將該元素指向“grad1”漸變
水平線性漸變
一個橢圓，帶有從黃色到綠色再到紅色的水平線性漸變
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
自己動手試一試 »
垂直線性漸變
一個橢圓，帶有從黃色到紅色的垂直線性漸變
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
自己動手試一試 »
帶文字的水平線性漸變
一個橢圓，帶有從黃色到紅色的水平線性漸變，並在橢圓內新增文字
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>
自己動手試一試 »
程式碼解釋
<text>元素用於新增文字
角度線性漸變
一個橢圓，帶有從黃色到紅色的角度線性漸變
這是 SVG 程式碼
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
自己動手試一試 »
SVG <linearGradient> 屬性
| Attribute | 描述 |
|---|---|
| id | 必需。定義 <linearGradient> 元素的唯一 ID |
| x1 | 漸變向量起始點的 x 位置。預設值為 0% |
| x2 | 漸變向量結束點的 x 位置。預設值為 100% |
| y1 | 漸變向量起始點的 y 位置。預設值為 0% |
| y2 | 漸變向量結束點的 y 位置。預設值為 0% |
| spreadMethod（擴散方法） | 定義漸變的擴散方法。可能的值：“pad”、“reflect”、“repeat”。預設值為“pad” |
| href | 定義對另一個 <linearGradient> 元素的引用，該元素將用作模板 |
| gradientUnits（漸變單位） | 定義 x1、x2、y1、y2 的座標系。可能的值：“userSpaceOnUse”和“objectBoundingBox”。預設值為“objectBoundingBox” |
| gradientTransform（漸變變換） | 定義漸變座標系的附加變換 |
