hue-rotate()对Bootstrap Icons失效是因为其字体图标和内联SVG默认为纯黑/白，无色相可旋；应改用currentColor方案控制颜色，filter仅对外链位图图片有效且需谨慎使用。
直接用 filter: hue-rotate() 给图标或图片改色，大概率没反应——不是你代码写错了，是图标本身没色相可旋。
为什么 hue-rotate() 对 Bootstrap Icons 失效？
因为默认的 <i class="bi bi-heart"></i> 是字体图标，本质是文字字符，渲染出来是纯黑（rgb(0, 0, 0)）或纯白（rgb(255, 255, 255)），没有定义色相（hue）。hue-rotate(90deg) 对无彩色无效，就像给灰度照片转色轮，转多少都是灰。
同理，内联 SVG 若原始 fill="#000" 或 fill="black"，也没色相可调。DevTools 里用吸管点一下，看到 rgb(0, 0, 0) 就别折腾 hue-rotate 了。
- 字体图标：只认
color，filter完全不生效 - 内联 SVG：必须把原图里的
fill和stroke改成"currentColor"，再靠父级color控制 - 外链图片（
<img src="heart.svg">）：filter才真正起作用，但得先确认它不是纯黑/白
真要靠 filter 改色，得先“唤醒”色相
对纯黑/白图硬上 hue-rotate 没用，得先用其他滤镜制造非中性灰，再旋转。常见组合：
立即学习“前端免费学习笔记（深入）”；
-
filter: grayscale(0%) sepia(100%) hue-rotate(120deg)—— 先加褐色基底，再转 -
filter: brightness(0.1) saturate(10) hue-rotate(60deg)—— 压暗+拉饱和，再调相位 - 顺序很重要：
hue-rotate()必须放在最前面，否则被后续brightness()或contrast()压缩后发灰
参数极难调准，Chrome 和 Safari 渲染偏差明显，同一组值在不同设备上可能偏青或偏紫。上线前务必真机验证。
图标改色，优先用 currentColor 而不是 filter
内联 SVG 图标改色最稳路径：确保 SVG 源码里所有 fill 和 stroke 都是 "currentColor"，然后 CSS 里控制父容器颜色：
<svg class="bi" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart"/> </svg>
对应 CSS：
-
.btn-primary { color: #fff; }→ 图标变白 -
.nav-link:hover { color: #4285f4; }→ 悬停时图标变蓝 -
@media (prefers-color-scheme: dark) { .theme-dark { color: #e0e0e0; } }→ 暗色模式自动适配
这方案语义清晰、性能好、兼容暗色模式，且不依赖滤镜叠加顺序或浏览器渲染差异。
什么时候才该用 filter: url(#myFilter)？
只有两种情况值得上 SVG 内置滤镜：
一是必须保留 PNG/JPEG 图标（比如带阴影或渐变的复杂图标），二是需要精确 RGB 映射（比如把黑图标强制映射为品牌蓝 #2563eb）。
示例 <feColorMatrix> 矩阵：
<filter id="to-blue"> <feColorMatrix type="matrix" values="0 0 0 0 0.15 0 0 0 0 0.39 0 0 0 0 0.74 0 0 0 1 0"/> </filter>
注意：
• 滤镜定义必须放在 HTML 的 <svg> 内或外链 SVG 文件中，不能写在 CSS 里
• 每个 filter 引用都会触发 GPU 合成，大量图标同时用会卡顿
• IE11 不支持 currentColor 在 SVG 中传播，若需兼容，得 JS 注入 fill 值
