SVG 渐变 - 线性学习笔记

SVG（Scalable Vector Graphics）渐变是一种将一个颜色逐渐转换为另一个颜色的过程。其中包括线性和径向两种类型。本篇学习笔记将着重介绍SVG渐变的线性类型。

什么是SVG渐变？

SVG渐变是在SVG中，将一个颜色逐渐转化为另一个颜色的过程。它主要由两个元素组成：<stop>和<linearGradient>。其中，<stop>用来定义渐变的颜色，而<linearGradient>则用来定义渐变的方向。

如何使用SVG渐变？

SVG渐变的使用需要遵循以下步骤：

定义渐变的颜色：使用<stop>元素定义渐变颜色，可以指定多个<stop>元素，每个元素都对应着不同的颜色和位置。
定义渐变的方向：使用<linearGradient>元素来定义渐变的方向和起止点。
使用渐变：在需要应用渐变的元素中加入fill或stroke属性，并将其值设置为渐变的ID。

实例演示

下面我们通过一个实例来演示如何使用SVG渐变。

htmlCopy Code
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

在上面的代码中，我们首先使用<defs>元素定义了一个线性渐变<linearGradient>，其ID为myGradient，起始点(0%, 0%)，结束点(100%, 0%)，颜色从红色渐变到蓝色。然后，在矩形<rect>元素中，通过fill属性将其填充为这个线性渐变。

总结

以上就是SVG渐变的基本知识和使用方法。掌握了SVG渐变，你可以制作出更加生动的图形效果。