SVG渐变负责色彩过渡与层次，滤镜负责光影立体感；二者协同可让简单图形呈现金属光泽或浮雕效果，关键在分工明确与合理嵌套。
用 SVG 渐变和滤镜提升图形质感，关键不在堆效果，而在理解“颜色过渡”与“光照处理”的分工：渐变负责基础色阶与层次，滤镜负责立体感、光影和材质细节。两者配合得当，一个简单矩形也能有金属光泽或柔光浮雕感。
渐变：控制色彩流动的方向与节奏
SVG 渐变不是 CSS 的 linear-gradient 替代品，而是独立的矢量对象，必须定义在 <defs> 中并通过 fill="url(#id)" 引用。它真正优势在于可缩放无损、支持 JS 动态改参、能绑定到任意形状（包括文字路径）。
-
线性渐变：默认从左到右（
x1="0%" y1="0%" x2="100%" y2="0%"），想做顶部高光？改成x1="0%" y1="0%" x2="0%" y2="100%"；想让高光更窄？两个<stop>的offset拉近（比如30%和40%），中间就形成一道锐利亮带 -
径向渐变：适合模拟球体、按钮按压、聚光灯。用
cx/cy定中心，r控制扩散范围；fx/fy可偏移焦点，制造非对称高光（比如fx="30%" fy="30%"让光从左上角来） -
实操建议：别只用两色直推。加 3–4 个
<stop>，中间插入灰阶过渡色（如 #fff → #f5f5f5 → #e0e0e0 → #cccccc），视觉更自然；透明度也可参与过渡，用stop-opacity做边缘虚化
滤镜：构建视觉“物理层”
滤镜本质是一条图像处理流水线：SourceGraphic 进来，经过偏移、模糊、着色、混合等原语加工，再输出。每一步都影响最终质感——模糊决定软硬，偏移控制阴影位置，颜色矩阵压暗或提亮，混合模式决定叠加逻辑。
-
阴影效果：典型链路是
feOffset→feGaussianBlur→feColorMatrix（调暗/染色）→feBlend（叠回原图）。注意width/height要设够大（常为"200%"），否则裁剪阴影；dx/dy别太大，否则像漂浮；stdDeviation小于 2 是硬边，8–12 是柔影，20+ 易糊成光晕 -
发光/辉光：不用
box-shadow，用feGaussianBlur+feFlood+feMerge。先模糊原图，再用feFlood填充纯色（如#4facfe），最后合并——比单纯模糊更可控、更易配色 -
金属/玻璃质感：组合
feSpecularLighting（需配合feNormalMap或feDisplacementMap）+ 高对比渐变。但注意：WebKit（Safari）对光照滤镜支持差，生产环境慎用；更稳妥的是用多层渐变叠加 + 微偏移阴影模拟
渐变 + 滤镜：协同增强的常见组合
单独用渐变显得平面，只套滤镜又容易脏乱。真正提升质感的是二者嵌套使用——比如把渐变作为滤镜输入源，或用滤镜强化渐变边界。
立即学习“前端免费学习笔记（深入）”；
- 给渐变文字加外发光：文字
fill设为线性渐变，再套一个发光滤镜（feGaussianBlur输出后用feFlood上色，feMerge合并），比纯色发光更有层次 - 按钮悬停立体感：常态用径向渐变模拟微凸，hover 时用
feOffset+feColorMatrix加深底部阴影，并轻微放大stdDeviation增强按压反馈 - 图表数据条增强：柱状图填充用渐变表现体积，再统一加一层极浅的
feGaussianBlur（stdDeviation="0.3"）柔化边缘，避免锯齿感，尤其在高 DPI 屏幕上更清爽
性能与兼容性避坑要点
质感不能以卡顿和白屏为代价。SVG 滤镜计算开销不小，尤其多层叠加或大尺寸区域。
- 滤镜尽量复用：定义一次
<filter id="glow">，多个元素共用filter="url(#glow)"，别重复定义 - 控制作用域：用
filterUnits="userSpaceOnUse"配合精确x/y/width/height，避免全图渲染；对小图标，width="150%" height="150%"足够，不必设 300% - 渐变 ID 命名规范：用语义名如
btn-primary-grad，而非grad1，方便维护和 JS 动态切换 - Safari 兼容底线：避开
feSpecularLighting、feDisplacementMap；用feDiffuseLighting替代时需测试；所有滤镜务必加color-interpolation-filters="sRGB"统一色彩空间
