hue-rotate()对纯黑/白图标无效，因其无色相可旋；应改用currentcolor控制内联svg，或对外链彩色图片组合grayscale(0%)/sepia(100%)等“唤醒”色相后再旋转。
filter: hue-rotate() 对图标没反应，先查 RGB 值
加了 hue-rotate(120deg) 却看不到颜色变化，大概率不是 CSS 写错了，而是图标本身是纯黑 rgb(0, 0, 0) 或纯白 rgb(255, 255, 255)。这类无彩色没有色相（hue）可旋，就像给灰度照片转色轮，转多少都是灰。
用 DevTools 的吸管工具点一下图标区域，确认实际渲染的像素值。如果是 (0, 0, 0) 或 (255, 255, 255)，就别硬调 hue-rotate —— 它真不生效。
- 字体图标（如
<i class="bi bi-heart"></i>）只响应color，filter完全被忽略 - 内联 SVG 若原始
fill="#000"，也得先改成fill="currentColor"才能靠父级color控制 - 外链图片（
<img src="icon.svg">）才真正走filter渲染管线，但前提是它本身带色彩信息
真要用 filter 动态修正色相，必须“唤醒”色相通道
对纯黑/白图直接上 hue-rotate 是徒劳的。得先用其他滤镜制造非中性灰，让色相有东西可旋。关键不是叠加多少个函数，而是顺序和组合逻辑。
hue-rotate() 必须放在最前面，否则后续的 brightness() 或 contrast() 会把它压回灰阶。
-
filter: hue-rotate(60deg) saturate(8) brightness(0.15);—— 先转相位，再暴力拉饱和、压暗，适合从黑底“挤出”蓝/紫 -
filter: hue-rotate(180deg) sepia(100%) contrast(1.8);—— 先反转色相，再加褐色基底强化可调范围 - Chrome 和 Safari 对同一组参数渲染偏差明显，
hue-rotate(120deg)在 iOS 上可能偏青，在 macOS 上偏绿，上线前务必真机验证
currentColor + 内联 SVG 是更稳的动态配色路径
如果目标是按钮图标随主题色自动变色，或适配 @media (prefers-color-scheme: dark)，filter 不是首选。内联 SVG 配合 currentColor 更轻量、语义清晰、兼容性好。
确保 SVG 源码里所有 fill 和 stroke 都写成 "currentColor"，然后靠父容器的 color 控制：
-
.btn-primary { color: #fff; }→ 图标变白 -
.nav-link:hover { color: #4285f4; }→ 悬停时图标变蓝 -
.theme-dark { color: #e0e0e0; }→ 暗色模式下自动适配
这个方案不依赖滤镜叠加顺序，不触发重绘性能开销，也不受浏览器色相渲染差异影响。
什么时候才该上 SVG 或 feColorMatrix？
只有两种情况值得绕过 filter 函数，去定义 SVG 内置滤镜：
- 必须保留 PNG/JPEG 图标（比如带阴影、渐变或抗锯齿细节的复杂图标），且需要精确控制输出色值
- 需要做确定性 RGB 映射，例如把输入的黑图标强制映射为品牌蓝
#2563eb，这时用<fecolormatrix></fecolormatrix>写矩阵比调参hue-rotate + saturate + brightness更可靠
但代价是维护成本高：每个映射都要手写 <filter></filter> 定义，再通过 filter: url(#myFilter) 引用，且无法用 CSS 变量动态切换。
真正难的不是写出一串滤镜函数，而是判断当前图标是否具备可调色相的基础 —— 很多时候，问题不在 CSS，而在图标资源本身的表达方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
