h5渐变色图标平滑切换的可行方案有三类：1.svg内联+fill切换（首选），需内联svg并用js/css控制opacity或双图层淡入淡出；2.mask-image+渐变背景，适用于字体图标，通过opacity微调模拟过渡；3.伪元素+渐变覆盖，适合纯css图标，用opacity或z-index交错动画实现。
在 H5 中实现渐变色图标在选中/未选中状态间的平滑调色，核心难点在于：**渐变本身不可直接 transition，且图标颜色切换需兼顾视觉连贯性与兼容性**。不能靠 background-color 过渡，也不能对 background-image 直接加 transition——浏览器不支持。真正可行、稳定、跨端的方案只有两类，按适用场景分述如下：
SVG 内联 + 渐变 fill 切换（推荐首选）
这是唯一能 100% 控制图标内部渐变走向、色标位置，并实现平滑过渡的方式。
- 必须将 SVG 代码写进 HTML（内联），不能用
<img src="icon.svg">或字体图标；否则无法注入<defs></defs>和引用url(#id) - 为选中态和未选中态分别定义两个
<lineargradient></lineargradient>（比如id="grad-active"和id="grad-inactive"），色标位置、角度、颜色都可精细控制 - 给
<path></path>等图形元素设置fill="url(#grad-inactive)"，再通过 class 切换动态改写为fill="url(#grad-active)" - 关键：用 CSS 变量 +
transition: fill 0.3s ease不生效 ——fill属性本身不支持过渡。正确做法是：用 JS 或 CSS 动画控制opacity或transform实现淡入淡出，或采用双图层叠加 + 透明度插值（见下条）
mask-image + 渐变背景（适合已有字体图标或单色 SVG）
当你已用 <i class="icon-home"></i> 或纯黑 SVG 引入图标，又不想改结构时，可用蒙版方案“借壳”实现渐变透出效果。
- 给图标容器设
mask-image: url("data:image/svg+xml;utf8,...")（内联 SVG mask），或用-webkit-mask兼容 Safari - 容器本身设
background: linear-gradient(135deg, #3b82f6, #8b5cf6)，渐变会透过 mask 显示为图标形状 - 选中态切换时，不是改渐变色，而是改整个
background值 —— 但注意：background-image无法 transition。所以实际要做的，是用两个渐变背景 +opacity交叉淡入淡出 - 例如：未选中态用
.tab-icon { background: linear-gradient(...); opacity: 1; }，选中态加类.tab-icon.active { opacity: 0.99; }触发重绘，再配合transition: opacity 0.25s ease模拟柔和切换（数值微调避免闪烁）
伪元素 + 渐变覆盖（轻量兼容方案）
适用于简单图标（如圆形、方形、三角形等纯 CSS 绘制的 icon），无需 SVG 或字体。
- 用
::before或::after绘制图标形状，设background: linear-gradient() - 未选中态设
opacity: 0.6，选中态设opacity: 1，加transition: opacity 0.2s ease-out - 若需更细腻的色彩过渡（如从蓝变紫），可提前准备两套渐变色值，用 JS 控制两个伪元素的
z-index与opacity交错动画
注意事项与避坑点
所有方案都要绕开这些常见失效原因：
-
颜色格式不统一：如果 JS 控制 color 切换，起始值用
#3b82f6，结束值却用rgb(139, 92, 246)，transition 就会跳变。务必全用 hex、全用 hsl() 或全用 rgba() -
缺少 fallback 色：渐变图标在旧浏览器或禁用 CSS 的环境下可能完全不可见，建议加一层
color: #6b7280作为基础色兜底 - Safari 对 mask-image 支持不稳定：iOS 16.4+ 才较完善，若需强兼容，优先选 SVG 内联方案
-
不要依赖
transition: all：它会误触发 layout 重排，导致卡顿。明确只写transition: opacity 0.25s, transform 0.25s
