异常教程

SVG 渐变 – 线性（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页设计与图形开发领域，SVG（可缩放矢量图形）因其灵活的矢量特性，成为实现复杂视觉效果的重要工具。而 SVG 渐变 – 线性，作为 SVG 的核心功能之一，不仅能够为图形注入动态色彩，还能通过参数调整实现多样化的设计方案。无论是为按钮添加光影效果，还是为背景设计流动感的色带，线性渐变都能以简洁的代码实现丰富的视觉表现。本文将从基础语法、核心属性到实际案例，系统性地讲解这一技术，并通过比喻和分步示例降低学习门槛。

一、SVG 渐变 – 线性的基础概念

1.1 什么是 SVG 渐变？

渐变（Gradient）是一种将两种或多种颜色在空间中平滑过渡的技术。线性渐变（Linear Gradient）则是在一条直线上进行颜色过渡的渐变类型。想象你手握一支蘸有颜料的画笔，在画布上从左到右拉出一条线，颜色从起点的蓝色逐渐变为终点的红色，这就是线性渐变的直观表现。

1.2 SVG 渐变的坐标系统

在 SVG 中，所有图形的绘制都基于一个笛卡尔坐标系。原点（0,0）位于画布左上角，x 轴向右延伸，y 轴向下延伸。线性渐变的方向由起始点（x1,y1）和结束点（x2,y2）决定，例如：

  • x1="0%" y1="0%" x2="100% y2="0%" 表示水平向右的渐变
  • x1="50%" y1="0%" x2="50% y2="100%" 表示垂直向下的渐变

1.3 线性渐变的语法结构

线性渐变的定义需通过 <linearGradient> 标签实现，其核心代码结构如下：

<svg width="200" height="200">  
  <defs>  
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">  
      <stop offset="0%" stop-color="#007bff" />  
      <stop offset="100%" stop-color="#6610f2" />  
    </linearGradient>  
  </defs>  
  <rect width="100%" height="100%" fill="url(#myGradient)" />  
</svg>

这段代码创建了一个从左到右的蓝色渐变矩形。其中：

  • <defs> 标签用于定义可复用的渐变
  • id 是渐变的唯一标识符
  • <stop> 标签定义颜色过渡的控制点

二、线性渐变的核心属性详解

2.1 起始与结束点（x1/y1/x2/y2）

这四个属性决定了渐变的方向。例如：

  • 水平方向：x1="0%" y1="50%" x2="100% y2="50%"（从左到右）
  • 垂直方向：x1="50%" y1="0%" x2="50% y2="100%"（从上到下）
  • 对角方向：x1="0%" y1="0%" x2="100% y2="100%"（从左上到右下）

比喻：
可以将起始点和结束点想象为“箭头”，箭头的方向即为渐变的方向，而箭头的长度决定了渐变的覆盖范围。

2.2 控制点与颜色（stop 标签）

<stop> 标签通过 offset 和 stop-color 属性定义颜色过渡的关键点：

  • offset 接受百分比（如 25%）或数值（如 0.25），表示从起始点到结束点的百分比位置
  • stop-color 指定该位置的颜色值

例如，以下代码会生成一个从蓝到绿再到黄的三色渐变：

<linearGradient id="threeColors" x1="0%" y1="0%" x2="100%" y2="0%">  
  <stop offset="0%" stop-color="#007bff" />  
  <stop offset="50%" stop-color="#28a745" />  
  <stop offset="100%" stop-color="#ffc107" />  
</linearGradient>

2.3 渐变的重复与扩展（spreadMethod）

通过 gradientTransform 和 gradientUnits 属性，可以控制渐变的扩展方式：

  • pad（默认）：超出部分保持最后一个颜色
  • reflect：镜像重复渐变
  • repeat：直接重复渐变

例如：

<linearGradient id="repeatGrad" spreadMethod="repeat" ...>

三、实战案例：从简单到复杂的设计

3.1 案例 1：基础矩形渐变

<svg width="300" height="200">  
  <defs>  
    <linearGradient id="basicGrad" x1="0%" y1="0%" x2="0% y2="100%">  
      <stop offset="0%" stop-color="#ff6b6b" />  
      <stop offset="100%" stop-color="#f7d25f" />  
    </linearGradient>  
  </defs>  
  <rect x="20" y="20" width="260" height="160" rx="15" fill="url(#basicGrad)" />  
</svg>

此案例创建了一个垂直渐变的圆角矩形，通过调整 x1/y1 和 x2/y2 的百分比值，可轻松切换渐变方向。

3.2 案例 2：动态按钮效果

<svg width="150" height="50">  
  <defs>  
    <linearGradient id="buttonGrad" x1="50%" y1="0%" x2="50% y2="100%">  
      <stop offset="0%" stop-color="#8e2de2" />  
      <stop offset="100%" stop-color="#4a00e0" />  
    </linearGradient>  
  </defs>  
  <rect x="10" y="10" width="130" height="30" rx="10" fill="url(#buttonGrad)" />  
  <text x="75" y="35" text-anchor="middle" fill="white" font-size="16">Click Me</text>  
</svg>

通过将渐变方向设为垂直，配合圆角矩形和文字，即可快速制作一个符合 Material Design 风格的按钮。

3.3 案例 3：复杂多色渐变

<svg width="400" height="200">  
  <defs>  
    <linearGradient id="complexGrad" x1="0%" y1="0%" x2="100%" y2="0%">  
      <stop offset="0%" stop-color="#ff7e5f" />  
      <stop offset="33%" stop-color="#feb47b" />  
      <stop offset="66%" stop-color="#ffdf80" />  
      <stop offset="100%" stop-color="#e1f5c4" />  
    </linearGradient>  
  </defs>  
  <polygon points="20,20 380,20 380,180 20,180" fill="url(#complexGrad)"/>  
</svg>

此代码通过 polygon 绘制一个四边形，并添加了四个颜色控制点，形成柔和的色带效果。

四、进阶技巧与常见问题解答

4.1 如何调整渐变的倾斜角度？

通过设置 gradientTransform 属性，可以像旋转图像一样调整渐变方向。例如：

<linearGradient id="angledGrad" gradientTransform="rotate(45)">

技巧：
gradientTransform 的旋转中心默认为渐变框的左上角，若需以图形中心旋转，需结合 gradientUnits="objectBoundingBox"。

4.2 渐变颜色过渡不平滑怎么办？

确保所有 <stop> 的 offset 值连续且无间隙。例如：

<stop offset="25%" stop-color="#007bff" />  
<stop offset="25%" stop-color="#6610f2" />

此代码会导致在 25% 处突然变色，应改为 24% 和 25% 以实现平滑过渡。

4.3 如何让渐变跟随形状缩放？

使用 gradientUnits="objectBoundingBox"，将坐标系范围限制在形状内部。例如：

<linearGradient id="relativeGrad" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">

此时，x1="0" 表示形状的左边界，x2="1" 表示右边界，无论形状尺寸如何变化，渐变方向始终一致。

五、结论

通过本文的讲解，读者应已掌握 SVG 渐变 – 线性 的核心原理与实现方法。从基础语法到复杂案例，线性渐变的灵活性和可定制性使其成为现代 Web 开发的必备技能。无论是为图标添加光影、设计动态背景，还是构建响应式 UI，掌握这一技术都能显著提升开发效率与视觉表现力。

未来，随着 CSS 和 SVG 的进一步融合，线性渐变的应用场景将更加广泛。建议读者通过修改代码示例中的参数，亲手尝试不同方向、颜色和控制点的组合，逐步探索属于自己的设计风格。

（全文约 1650 字）

最新发布

查看更多文章