SVG渐变介绍

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的图形标记语言。SVG渐变用于在SVG图像中创建平滑过渡的颜色或色彩效果。在本文中，我们将介绍SVG渐变的不同类型和用法。

线性渐变（Linear Gradient）

线性渐变是在两个端点之间创建一个色彩的平滑过渡。通过指定渐变的起始和结束点，您可以定义线性渐变的方向和长度。

<svg width="200" height="200">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #ff0000; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #0000ff; stop-opacity: 1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#myGradient)" />
</svg>

上述代码中的linearGradient元素定义了一个id为myGradient的线性渐变。该渐变从红色（#ff0000）平滑过渡到蓝色（#0000ff）。然后，我们使用rect元素来应用该渐变。

径向渐变（Radial Gradient）

径向渐变是以一个中心点为起点，在中心点周围创建一个色彩的平滑过渡。通过指定渐变的中心点和半径，您可以定义径向渐变的形状和大小。

<svg width="200" height="200">
  <defs>
    <radialGradient id="myGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color: #ff0000; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #0000ff; stop-opacity: 1" />
    </radialGradient>
  </defs>
  <rect width="200" height="200" fill="url(#myGradient)" />
</svg>

上述代码中的radialGradient元素定义了一个id为myGradient的径向渐变。该渐变从红色（#ff0000）平滑过渡到蓝色（#0000ff）。然后，我们使用rect元素来应用该渐变。

颜色映射（Color Mapping）

SVG渐变还可以用于将颜色映射到某个范围。您可以使用stop元素定义不同的颜色和其相对的位置。

<svg width="200" height="200">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" style="stop-color: #ff0000; stop-opacity: 1" />
      <stop offset="50%" style="stop-color: #00ff00; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #0000ff; stop-opacity: 1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#myGradient)" />
</svg>

上述代码中的linearGradient元素定义了一个id为myGradient的线性渐变。该渐变将红色（#ff0000）映射到起始位置，绿色（#00ff00）映射到中间位置，蓝色（#0000ff）映射到结束位置。

总结

SVG渐变是创建平滑过渡颜色或色彩效果的强大工具。我们介绍了线性渐变、径向渐变和颜色映射的使用方法和示例代码。通过灵活应用这些渐变，您可以为您的SVG图像增加动态和生动的效果。

以上就是SVG渐变的介绍。希望对你有所帮助！

参考链接：

• SVG渐变文档
• 线性渐变示例
• 径向渐变示例
• 颜色映射示例