设置渐变色背景
在 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="
)
)
