SVG 中的线性渐变通过 <linearGradient> 元素实现。线性渐变从一个点沿着一条直线平滑过渡到另一个点，通常用于填充或描边图形。渐变的颜色可以通过多个停靠点 (<stop>) 来定义，每个 <stop> 元素指定了渐变的颜色和位置。

目录

  1. 基本语法
  2. 线性渐变应用示例
  3. 线性渐变属性详解
  4. 渐变方向控制
  5. 渐变多个颜色停靠点
  6. 参考资料
  7. 出站链接

基本语法

线性渐变使用 <linearGradient> 元素定义。首先定义一个 <defs> 元素作为渐变的容器，接着使用 <linearGradient> 设置渐变的方向、颜色和过渡点。

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
  • <linearGradient>：定义线性渐变，必须指定 id，以便在其他元素中引用。
    • id="grad1"：渐变的唯一标识符。
    • x1、y1、x2、y2：定义渐变的起始点和终止点。百分比值表示相对于元素尺寸的位置。
  • <stop>：定义渐变中的颜色停靠点。
    • offset：指定渐变中颜色的位置。
    • stop-color：指定颜色。
    • stop-opacity：指定颜色的透明度。

线性渐变应用示例

1. 简单的线性渐变

以下代码展示了一个从黄色到红色的简单线性渐变，应用于一个矩形。

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
  • 该矩形从左上角到右下角的线性渐变，颜色从黄色 (rgb(255,255,0)) 渐变到红色 (rgb(255,0,0))，过渡平滑。

2. 从左到右的渐变

下面是一个从左到右的线性渐变应用示例，颜色从蓝色过渡到绿色。

<svg width="300" height="100">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
      <stop offset="100%" style="stop-color:green;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="280" height="80" fill="url(#grad2)" />
</svg>
  • 渐变方向是从左到右 (x1="0%"，x2="100%")，颜色从蓝色到绿色。

3. 从上到下的渐变

以下是一个从上到下的线性渐变，颜色从紫色过渡到橙色。

<svg width="300" height="200">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:purple;stop-opacity:1" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="280" height="180" fill="url(#grad3)" />
</svg>
  • 渐变方向是从上到下 (y1="0%"，y2="100%")，颜色从紫色到橙色。

线性渐变属性详解

  • x1, y1, x2, y2：这些属性控制渐变的方向：
    • x1, y1：渐变的起始点。
    • x2, y2：渐变的终止点。
    • 这些值通常为 0%, 50%, 100%，分别表示元素的左、中心、右、上、下位置。可以使用坐标值设置具体的方向。
  • offset：指定颜色停靠点的位置。取值范围从 0% 到 100%，表示从渐变的起始点到终止点的相对位置。
  • stop-color：指定该停靠点的颜色，可以使用任何有效的颜色值（如 rgb(255,0,0)、#FF0000、red）。
  • stop-opacity：指定颜色的透明度，取值范围是 0 到 1，其中 0 是完全透明，1 是完全不透明。

渐变方向控制

在定义线性渐变时，可以通过调整 x1, y1, x2, y2 来控制渐变的方向。例如：

  • 从左到右：x1="0%", x2="100%", y1="50%", y2="50%"。
  • 从上到下：x1="50%", x2="50%", y1="0%", y2="100%"。
  • 对角线渐变：x1="0%", y1="0%", x2="100%", y2="100%"。

渐变多个颜色停靠点

可以使用多个 <stop> 元素定义渐变的颜色停靠点，以创建更复杂的渐变效果。

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
      <stop offset="50%" style="stop-color:green;stop-opacity:1" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad4)" />
</svg>
  • 该矩形从黄色 (offset="0%") 过渡到绿色 (offset="50%") 再到蓝色 (offset="100%")，创造了一个渐变色带。

参考资料

出站链接

  • SVGOMG: 在线SVG优化工具，支持优化渐变效果。
  • Inkscape: 开源矢量图形设计软件，支持SVG渐变创建和编辑。