SVG 渐变 - 线性

SVG 渐变是一种在 SVG 图形中应用颜色渐变效果的方法。其中，线性渐变是一种常见的渐变类型，它沿着一条直线从一个颜色过渡到另一个颜色。在 SVG 中，线性渐变由 <linearGradient> 元素定义。

定义线性渐变

要定义一个线性渐变，首先需要在 SVG 文件中添加一个 <linearGradient> 元素，并设置 id 属性来标识这个渐变：

<linearGradient id="linearGradient1">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</linearGradient>

在上面的代码中，我们定义了一个线性渐变，从红色过渡到蓝色。<stop> 元素用于指定渐变的颜色和位置。offset 属性表示颜色的位置，可以使用百分比或像素值。

应用线性渐变

要在 SVG 图形中应用线性渐变，可以使用 fill 或 stroke 属性，并指定渐变的 url：

<rect x="50" y="50" width="200" height="100" fill="url(#linearGradient1)" />

在上面的代码中，我们创建了一个矩形，并使用 fill="url(#linearGradient1)" 来应用之前定义的线性渐变。

线性渐变可以应用在各种 SVG 元素上，如矩形、圆形、路径等，为图形添加丰富的颜色效果。

现在你已经了解了如何在 SVG 中使用线性渐变，接下来让我们深入学习其他类型的渐变效果。