HTML SVG 渐变介绍

SVG渐变指的是指在SVG图像中使用的颜色过渡。有两种类型的渐变：线性渐变和径向渐变。

线性渐变

线性渐变基础

线性渐变定义在'<linearGradient>'元素内。它需要指定渐变方向和颜色。以下是一个简单的线性渐变的示例：

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="380" height="130" fill="url(#grad1)" />
</svg>

此例中，'x1'和'y1'指定起始点，'x2'和'y2'指定结束点。我们定义了两个'stop'元素，它们分别定义了0%和100%的颜色。'offset'属性指定了每个颜色停靠的位置。在此示例中，我们使用了'rgb()'函数指定了颜色。

线性渐变方向

线性渐变有不同的方向设置。'x1'和'y1'的值为0%时，渐变的方向是从左到右；'x1'和'y1'的值为50%时，渐变的方向是从中心向两边；'x1'和'y1'的值为100%时，渐变的方向是从右到左。

'x2'和'y2'的值是相同的，将会影响到渐变的角度和弧度。

线性渐变重复

可以使用'repeatCount'和'repeatDur'属性控制渐变的重复次数和持续时间。

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" repeatCount="indefinite" />
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" repeatCount="indefinite" />
      </stop>
      <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" begin="1s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" begin="2s" repeatCount="indefinite" />
      </stop>
  </defs>
  <rect x="10" y="10" width="380" height="130" fill="url(#grad1)" />
</svg>

在此示例中，我们定义了线性渐变，并使用了'repeatCount'属性使其无限重复。我们使用了动画来控制颜色停靠的位置，使渐变呈现出循环流动的效果。

径向渐变

径向渐变定义在'<radialGradient>'元素内。它的颜色过渡是从固定点向外扩散的。与线性渐变不同，径向渐变有多个控制点。

以下是一个简单的径向渐变的示例：

<svg height="150" width="400">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="75" rx="200" ry="75" fill="url(#grad2)" />
</svg>

在此示例中，我们使用'<ellipse>'元素绘制了一个椭圆。我们将径向渐变应用在椭圆上，使颜色从中心向四周进行渐变。

径向渐变重复

可以使用'repeatCount'和'repeatDur'属性控制径向渐变的重复次数和持续时间。与线性渐变相似，径向渐变也可以通过动画控制变化。

<svg height="150" width="400">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" repeatCount="indefinite">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" repeatCount="indefinite" />
      </stop>
      <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" begin="1s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1">
        <animate attributeName="offset" values="0;1;0" dur="4s" begin="2s" repeatCount="indefinite" />
      </stop>
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="75" rx="200" ry="75" fill="url(#grad2)" />
</svg>

此示例中，我们使用动画来控制径向渐变的颜色和位置。径向渐变不仅可以从中心向外部扩散，而且可以从固定点向外部扩散。

总结

HTML SVG渐变允许我们在SVG图像中创建平滑的颜色过渡。线性渐变和径向渐变分别控制颜色的过渡方向和方式。我们可以使用动画来控制渐变的颜色、位置和重复次数，使图像呈现出更加生动的效果。