从零开始学SVG（六）：巧用渐变色，让你的图像更加丰富多彩！

2024-02-21 11:41:09

在SVG的世界里，我们可以应用渐变色为图像赋予更多的色彩变化和视觉美感。无论是线性渐变还是径向渐变，每种渐变方式都能带来不同的效果，帮助您创建出更加生动和引人注目的图形。本文将通过深入浅出的讲解和丰富的示例，带您领略SVG渐变色的魅力，让您的图形设计更上一层楼！

一、认识渐变色

渐变色是一种色彩从一种颜色逐渐过渡到另一种颜色的效果。在SVG中，渐变色可以应用于填充和描边，为图形增添更多层次感和视觉冲击力。渐变色的种类有很多，但最常用的有以下两种：

1. 线性渐变

线性渐变是指颜色沿直线方向从一种颜色渐变到另一种颜色。使用元素可以创建线性渐变。

2. 径向渐变

径向渐变是指颜色从一个圆心向外或从外向内渐变。使用元素可以创建径向渐变。

二、应用渐变色

1. 线性渐变的应用

使用线性渐变时，我们需要指定渐变方向、起始颜色和结束颜色。方向可以通过x1、y1、x2和y2四个属性来控制。起始颜色和结束颜色可以通过stop元素来设置。

<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</linearGradient>

2. 径向渐变的应用

使用径向渐变时，我们需要指定渐变中心、焦点和颜色停止。渐变中心可以通过cx和cy属性来控制。焦点可以通过fx和fy属性来控制。颜色停止可以通过stop元素来设置。

<radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</linearGradient>

三、实战演练

现在，我们来通过几个实际案例，了解如何在SVG中使用渐变色。

1. 创建一个五彩缤纷的圆形

<svg width="200px" height="200px">
  <defs>
    <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="25%" stop-color="orange" />
      <stop offset="50%" stop-color="yellow" />
      <stop offset="75%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="100" fill="url(#radial-gradient)" />
</svg>

2. 创建一个带有线性渐变的矩形

<svg width="200px" height="100px">
  <defs>
    <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="200" height="100" fill="url(#linear-gradient)" />
</svg>

3. 创建一个带有径向渐变的三角形

<svg width="200px" height="200px">
  <defs>
    <radialGradient id="radial-gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="75%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <polygon points="100,0 200,200 0,200" fill="url(#radial-gradient)" />
</svg>