hue-rotate无效是因为图标多为纯黑/白（无色相），需先用grayscale(0%)+sepia(100%)等“唤醒”色相，或改用currentColor、SVG滤镜、mask-image等更可靠方案。
filter 里用 hue-rotate 改图标颜色，为什么经常不灵？
因为 hue-rotate() 只对带色彩的像素起作用，而绝大多数 SVG 或 PNG 图标是纯黑（#000）或纯白（#fff）——这些是无彩色，色相（hue）没有定义，旋转多少度都还是灰黑灰白。
常见错误现象：filter: hue-rotate(90deg) 加在 SVG 上完全没变化；或者只让阴影/描边变色，主体图标纹丝不动。
- 先确认图标是否真有“色相”：打开 DevTools，用 eyedropper 点一下图标区域，看 RGB 值是不是接近
(0, 0, 0)或(255, 255, 255) - 如果确实是单色，得先用
grayscale(0%)+sepia(100%)或brightness(0.1)等组合“唤醒”色相通道（原理是制造非中性灰） - 更稳的路径：直接用
filter: invert(1) brightness(1.5) contrast(2)模拟“黑→红”等映射，但需调参，且不精确
SVG 内联时用 fill=currentcolor 最省事
这是真正可控、语义清晰、适配主题色的方案，比纯 CSS filter 更可靠。前提是图标以 <svg></svg> 标签内联（不是 <img src="..." alt="CSS如何通过滤镜改变图标颜色_利用filter属性实现单色图标变色" >），且原图用 fill="currentColor" 替代固定颜色。
使用场景：按钮图标、导航菜单、Dark Mode 切换组件——只要父元素设了 color，图标自动同步。
立即学习“前端免费学习笔记（深入）”；
- 原 SVG 里把
fill="#333"换成fill="currentColor"，并删掉所有stroke固定值（同理换成stroke="currentColor"） - CSS 中控制：
.icon-btn { color: #4285f4; }→ 图标立刻变蓝；.icon-btn.dark { color: #fff; }→ 暗色模式下变白 - 注意：IE 不支持
currentColor在 SVG 中的传播（IE11 部分支持，但有 bug），如需兼容，得 fallback 到 JS 注入 fill 值
filter: url(#id) 调用 SVG 滤镜，能精准控制但麻烦
当必须保留 PNG 图标或需要复杂着色（比如渐变填充、透明度分层），就得用 SVG <filter></filter> 定义后通过 url(#myFilter) 引用。它比 CSS filter 函数灵活，但维护成本高。
参数差异明显：feColorMatrix 可做任意 RGB 映射，feComponentTransfer 能单独调某个通道，而纯 CSS 的 filter 是全局叠加，不可逆。
- 示例：把黑图标映射为蓝色，可写
<fecolormatrix type="matrix" values="0 0 0 0 0.26 0 0 0 0 0.52 0 0 0 0 0.98 0 0 0 1 0"></fecolormatrix>（最后一列是 RGBA 偏移） - 性能影响：每个
filter引用都会触发 GPU 合成，大量图标同时用会卡顿；建议只用于关键交互元素，非列表项 - 容易踩的坑：滤镜定义必须在 HTML 中（或外链 SVG 文件内），不能放在 CSS 文件里；且
url(#xxx)的#xxx必须和<filter id="xxx"></filter>完全一致，大小写敏感
background-image + mask-image 实现 PNG 图标换色
对无法改源码的 PNG 图标（比如第三方图标库），这是最现实的方案：用 CSS mask-image 把 PNG 当蒙版，再用 background-color 或 background-gradient 填充。
兼容性目前 OK（Chrome 80+、Firefox 70+、Safari 15.4+），但 iOS Safari 15.2 有 mask 渲染偏移 bug。
- 关键写法：
background-color: #e53e3e; -webkit-mask-image: url(icon.png); mask-image: url(icon.png); - 注意 PNG 必须是纯黑图形 + 透明背景（Alpha 通道有效），白色或灰色区域会导致遮罩不完整
- 如果图标边缘发虚，加
-webkit-mask-size: contain; mask-size: contain;和background-repeat: no-repeat;对齐 - 不能直接用
mask-image: linear-gradient()来做渐变色图标——mask 只接受图像或渐变作为遮罩源，填色还得靠 background
真正难的不是选哪个方案，而是看清图标来源和交付约束：内联 SVG 就别硬套 filter；PNG 就别折腾 hue-rotate；要 SSR 或低版本兼容，currentColor 得配 JS fallback。选错起点，后面全是补丁。
