直接用filter: grayscale()配合transition可实现svg黑白到彩色平滑切换，但仅限内联svg（如），不支持或引用；需显式声明transition: filter、初始值设grayscale(1)、hover设grayscale(0)，并避免使用none。
直接用 filter: grayscale() 配合 transition 实现，但必须是内联 SVG（即 <svg><path></path></svg> 形式），且不能依赖 <img src="icon.svg"> —— 后者完全不支持 CSS 滤镜过渡。
核心写法：灰度默认 + hover 清除
默认设为全灰，悬停时还原彩色，这样更稳定：
svg { filter: grayscale(1); transition: filter .35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }svg:hover { filter: grayscale(0); }- 务必显式写
transition: filter，不要用transition: all，后者在旧 Safari 中不可靠 - 初始值必须是合法滤镜值，
grayscale(0)是彩色态，none不是标准可动画值，应避免
注意 SVG 引入方式的陷阱
只有内联 SVG 才能被 CSS 的 filter 控制：
- ✅ 正确：
<svg><path d="..."></path></svg>—— 可加filter，可过渡 - ❌ 错误：
<img src="icon.svg">—— 浏览器视作位图，filter无效 - ❌ 错误：
<use href="#icon"></use>（引用外部<symbol></symbol>）—— 外部定义的 SVG 不参与宿主文档的 filter 渲染上下文
多色图标或需精细控制时的替代方案
如果图标本身含多种颜色（如 logo 红+蓝），仅靠 grayscale() 会丢失色相信息，此时更适合用 fill 过渡：
- 先清理所有
<path></path>的行内fill属性（如fill="#ff0000"） - 设父容器
color，并让路径继承：svg path { fill: currentColor; } - 再通过
transition: color控制变色：.icon { color: #666; transition: color .3s; } .icon:hover { color: #007bff; } - 多色部分单独加 class：
<path class="accent"></path>，再写.icon:hover .accent { fill: #e74c3c; }
兼容性与实机避坑
现代浏览器基本支持，但仍有细节需留意：
- Chrome 115+ 支持
<image></image>元素上直接过渡filter，Firefox 目前仍不支持 - 安卓 WebView 中偶有闪帧，可加
transform: translateZ(0)触发硬件加速（但可能引发文字锯齿，需实测） - IE11 完全不支持
filter: grayscale()，如需兼容，建议 JS 切换 class 或降级为 opacity/visibility 动画 - SVG 内部若含
<fecolormatrix></fecolormatrix>自定义滤镜，需配合url(#id)切换，并确保该 filter 声明中已设color-interpolation-filters="linearRGB"提升色彩过渡质量
