svg中渐变色的应用

设置渐变色背景

在 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属性来控制渐变的方向和角度，具体步骤如下：

1. 创建<defs>元素：在<svg>元素中创建<defs>元素，用于定义渐变。
2. 创建<linearGradient>或<radialGradient>元素：在<defs>元素中创建<linearGradient>或<radialGradient>元素，并为其赋值唯一的id。
3. 设置渐变方向：通过设置 x1、x2、y1、y2属性来控制渐变的方向和角度。
   • 当y1和y2相等且x1和x2不同时，将创建水平渐变。
   • 当x1和x2相等且y1和y2不同时，将创建垂直渐变。
   • 当x1和x2不相同且y1和y2不同时，将创建角度渐变。
4. 应用渐变：在需要应用渐变的元素上，使用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="