异常教程
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+ 小伙伴加入学习 ，欢迎点击围观
在 Web 开发与图形设计领域，SVG（可缩放矢量图形）凭借其矢量特性，成为实现复杂视觉效果的重要工具。其中，SVG 渐变-放射性技术因其独特的视觉表现力，常被用于创建动态光影、抽象艺术或科技感界面。本文将从基础概念出发，结合代码示例与形象化比喻，系统性地解析放射性渐变的实现原理与应用场景，帮助读者掌握这一技术的核心要点。
SVG 渐变的基础概念
什么是渐变？
渐变（Gradient）是图形设计中一种通过颜色平滑过渡实现视觉效果的技术。在 SVG 中，渐变分为两种主要类型：线性渐变（Linear Gradient）和放射性渐变（Radial Gradient）。放射性渐变的特点是颜色从中心向外扩散，形成类似“光晕”或“涟漪”的效果，因此在模拟光源、星云或圆形图案时表现尤为突出。
SVG 渐变的核心元素
要理解放射性渐变，需先熟悉 SVG 渐变的通用语法结构：
<svg>
<defs>
<radialGradient id="grad">
<!-- 定义颜色停靠点 -->
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad)" />
</svg>
<defs>：定义可复用的图形元素（如渐变、滤镜等）。<radialGradient>：放射性渐变的容器，需指定id以便引用。<stop>：定义颜色在渐变中的位置与颜色值，offset控制颜色停靠点的百分比。
放射性渐变的核心原理
参数详解：从简单到复杂
放射性渐变的视觉效果由以下核心参数控制：
| 参数名 | 作用描述 |
|-----------------|--------------------------------------------------------------------------|
| cx, cy | 定义渐变中心点的坐标（相对于容器的百分比或绝对值）。 |
| r | 定义渐变的半径，控制扩散范围。 |
| fx, fy | 可选参数，定义焦点位置，默认与中心点重合。调整焦点可实现非对称渐变效果。 |
参数的直观理解：以“光斑”为比喻
想象一个手电筒的光斑：
- 中心点（cx, cy）：光斑的中心位置。
- 半径（r）：光斑的扩散范围。
- 焦点（fx, fy）：若调整焦点，光斑会像被拉伸的橡皮泥一样变形，产生非对称效果。
示例：基础放射性渐变
<svg width="200" height="200">
<defs>
<radialGradient id="myGrad"
cx="50%" cy="50%"
r="50%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="90" fill="url(#myGrad)"/>
</svg>
此代码生成一个以圆形为中心的黄色到黑色渐变，模拟“夜空中的光源”效果。
进阶技巧：控制放射性渐变的形态
调整中心点与半径
通过修改 cx, cy 和 r 参数，可以改变渐变的扩散方向和范围。例如：
<!-- 使渐变中心偏移，形成椭圆形扩散 -->
<radialGradient id="offsetGrad"
cx="30%" cy="70%"
r="60%">
<stop offset="0%" stop-color="lightblue" />
<stop offset="100%" stop-color="white" />
</radialGradient>
此设置将中心点移至左下方，半径扩大至 60%，适合表现“倾斜的水面倒影”。
焦点参数（fx, fy）的魔法
当设置 fx 和 fy 时，渐变的扩散路径会从焦点而非中心点开始：
<radialGradient id="focusGrad"
cx="50%" cy="50%" r="50%"
fx="20%" fy="20%">
<stop offset="0%" stop-color="green" />
<stop offset="100%" stop-color="white" />
</radialGradient>
焦点（20%,20%）与中心点（50%,50%）的分离，使得渐变呈现从左上向右下扩散的“拉伸”效果，类似将光斑按住一边拉长。
实战案例：创建动态放射性效果
案例1：星空背景
<svg width="400" height="400">
<defs>
<radialGradient id="starGrad"
cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="rgba(255,255,0,0.8)"/>
<stop offset="30%" stop-color="rgba(255,255,0,0.5)"/>
<stop offset="100%" stop-color="rgba(0,0,0,0)"/>
</radialGradient>
</defs>
<!-- 主背景层 -->
<rect width="100%" height="100%" fill="black"/>
<!-- 渐变层 -->
<circle cx="200" cy="200" r="150" fill="url(#starGrad)"/>
</svg>
此代码通过半透明黄色渐变叠加黑色背景，模拟“星光从中心向外发散”的效果。
案例2：交互式按钮
结合 CSS，可让放射性渐变响应用户操作：
<button class="radial-btn">点击我</button>
<style>
.radial-btn {
width: 120px;
height: 40px;
border: none;
background: radial-gradient(
circle at 50% 50%,
#ff6b6b 0%,
#fbc02d 100%
);
transition: 0.3s ease;
}
.radial-btn:hover {
background: radial-gradient(
circle at 20% 80%,
#ff6b6b 0%,
#fbc02d 100%
);
}
</style>
当鼠标悬停时，渐变中心点移动，按钮的“光斑”产生位移，增强交互感。
常见问题与解决方案
问题1：渐变范围超出容器？
原因：r 参数值过大导致渐变超出图形边界。
解决：将 r 设为容器半径的百分比，或通过 cx, cy 调整中心点位置。
问题2：多颜色渐变过渡不自然？
技巧：
- 增加
stop节点数量，控制颜色过渡的“密度”。 - 使用
stop-opacity调整透明度，实现渐隐效果。
问题3：如何实现“爆炸”效果？
方法：
<radialGradient id="explosion"
cx="50%" cy="50%" r="150%"
fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"/>
<stop offset="50%" stop-color="white" stop-opacity="0.5"/>
<stop offset="100%" stop-color="black" stop-opacity="0"/>
</radialGradient>
通过将 r 设为 150%，使渐变超出容器，模拟“光晕溢出”的爆炸感。
结论
掌握 SVG 渐变-放射性技术，不仅能提升视觉设计的层次感，还能为网页交互注入动态活力。从基础参数到高级技巧，本文通过代码示例与场景化比喻，帮助读者逐步构建对放射性渐变的认知。无论是模拟自然现象还是设计科技界面，这一技术都能成为开发者工具箱中的“视觉魔法棒”。
未来，随着 CSS 和 SVG 的持续演进，放射性渐变的应用场景将更加丰富。建议读者多尝试参数组合与创意设计，探索属于自己的视觉表达方式。