SVG 中的线性渐变

介绍

SVG（Scalable Vector Graphics）是一种用于绘制矢量图形的标记语言。在 SVG 中，线性渐变（linear gradients）是一种常用的渐变效果，它可以在两个或多个颜色之间创建平滑的过渡。

本文将介绍 SVG 中的线性渐变的基本概念、语法和用法，并提供示例代码以供参考。

基本概念

线性渐变是一种从一个点到另一个点的颜色过渡。在 SVG 中，线性渐变可以沿着水平、垂直或对角线方向进行。

线性渐变由起始点和结束点定义，并在这两个点之间创建一个色标（color stop）列表。每个色标包含一个位置和对应的颜色。

语法

要在 SVG 中创建线性渐变，可以使用 <linearGradient> 元素。该元素包含一个或多个 <stop> 子元素，每个子元素定义了一个色标。

以下是线性渐变的基本语法示例：

<linearGradient id="gradientId" x1="x1_value" y1="y1_value" x2="x2_value" y2="y2_value">
  <stop offset="offset_value" stop-color="color_value" stop-opacity="opacity_value" />
  <stop offset="offset_value" stop-color="color_value" stop-opacity="opacity_value" />
  ...
</linearGradient>

• id: 渐变的唯一标识符。
• x1, y1: 起始点的 x 和 y 坐标。
• x2, y2: 结束点的 x 和 y 坐标。
• offset: 色标的位置，范围从 0（起始点）到 1（结束点）。
• stop-color: 色标的颜色值。
• stop-opacity: 色标的不透明度。

线性渐变可以通过 fill 或 stroke 属性应用于 SVG 图形元素。

用法示例

以下是一个简单的线性渐变示例，以添加一个水平渐变效果：

<svg width="200" height="200">
  <linearGradient id="gradientId" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </linearGradient>
  <rect x="10" y="10" width="180" height="180" fill="url(#gradientId)" />
</svg>

效果如下：

以上示例中，线性渐变从左到右，颜色从红色渐变到蓝色。

结论

线性渐变是 SVG 中实现平滑过渡效果的一种重要工具。通过理解线性渐变的基本概念和语法，程序员可以在 SVG 中创建出丰富多样的渐变效果，为图形和界面增添视觉吸引力。