設置漸變色背景
在 SVG 中可以使用<linearGradient>或<radialGradient>元素來設置漸變背景色。以下是一個簡單的示例：
<svg width="400" height="400"><defs><linearGradient id="myGradient"><stop offset="0%" stop-color="red" /><stop offset="100%" stop-color="blue" /></linearGradient></defs><rect x="0" y="0" width="400" height="400" fill="url(#myGradient)" />
</svg>
在這個示例中，定義了一個從紅色到藍色的線性漸變，并將其應用到矩形上作為背景填充。
設置漸變的方向和角度
在 SVG 中，可以使用<linearGradient>或<radialGradient>元素來設置漸變背景色，同時通過設置x1、x2、y1、y2屬性來控制漸變的方向和角度，具體步驟如下：
- 創建
<defs>元素：在<svg>元素中創建<defs>元素，用于定義漸變。 - 創建
<linearGradient>或<radialGradient>元素：在<defs>元素中創建<linearGradient>或<radialGradient>元素，并為其賦值唯一的id。 - 設置漸變方向：通過設置 x1、x2、y1、y2屬性來控制漸變的方向和角度。
- 當
y1和y2相等且x1和x2不同時，將創建水平漸變。 - 當
x1和x2相等且y1和y2不同時，將創建垂直漸變。 - 當
x1和x2不相同且y1和y2不同時，將創建角度漸變。
- 當
- 應用漸變：在需要應用漸變的元素上，使用
fill屬性并指定url(#漸變id)，其中漸變id是之前定義的漸變元素的id。
以下是一個示例代碼，演示如何設置水平漸變和角度漸變：
<svg width="400" height="400"><defs><linearGradient id="myGradient1"><stop offset="0%" stop-color="red" /><stop offset="100%" stop-color="blue" /></linearGradient><linearGradient id="myGradient2"><stop offset="0%" stop-color="yellow" /><stop offset="100%" stop-color="green" /></linearGradient></defs><rect x="0" y="0" width="400" height="400" fill="url(#myGradient1)" /><circle cx="
)
)
