hue-rotate无效主因是svg图标含内联fill/stroke值或非纯色；需改用fill="currentcolor"或fill="none"+stroke="currentcolor"，并确保css控制颜色，配合transition时须设初始filter值。
hue-rotate 为什么图标没变色？
直接加 filter: hue-rotate(90deg) 没反应，大概率是图标本身不是纯色 SVG 或用了 fill 内联样式覆盖了 CSS。SVG 图标若用 fill="currentColor" 或未指定颜色，才能被 hue-rotate 影响；如果 SVG 内部写死 fill="#333"，filter 就无效。
- 检查 SVG 源码：优先用
fill="none"+stroke="currentColor"（线性图标）或fill="currentColor"（面状图标） - 避免内联
fill/stroke值，改用 CSS 控制颜色 - 位图（PNG/JPG）也能用
hue-rotate，但效果常不自然——因为像素颜色混合复杂，不如单色 SVG 可控
动态染色要响应 hover 或主题切换
用 :hover 触发 hue-rotate 最简单，但注意 transition 必须作用在 filter 上，且需设初始值（否则从无到有会跳变）。
-
transition: filter 0.2s ease必须写在默认状态里，不能只写在:hover - 多个 filter 组合时（如
brightness+hue-rotate），必须写全，不能只写变动项：filter: brightness(1.2) hue-rotate(180deg) - 暗色模式下想自动反色？别只靠
hue-rotate(180deg)—— 它只是色相旋转，不等价于 invert，可能把蓝色转成橙色而非灰白
Chrome 和 Safari 的 filter 性能差异
hue-rotate 在 Chrome 渲染较快，Safari（尤其旧版）容易卡顿，尤其是批量图标 + transition 时。
- 避免在
scroll或resize中动态设置filter，改用 CSS class 切换 - 移动端慎用高频率动画（如
@keyframes不停转 hue），iOS Safari 可能掉帧 - 如果只需“换色”不需“旋转感”，
filter: invert(1) brightness(0.8)有时比hue-rotate更稳定、更接近设计意图
和 CSS 变量配合实现主题化染色
纯靠 hue-rotate 很难精准控制目标色，但结合 --primary-hue 自定义属性 + hsl() 色彩模型，就能让图标随主题变量联动。
- 不推荐：
filter: hue-rotate(calc(var(--hue, 200) * 1deg))——hue-rotate接收的是角度偏移量，不是目标色相 - 推荐方案：用
color控制currentColor，再用filter微调，例如：color: hsl(var(--hue, 200), 80%, 60%); filter: saturate(1.1) - 真正需要动态色相旋转的场景极少——多数所谓“主题色图标”，其实只需要改
color或fill，filter是备选，不是首选
CSS 的 hue-rotate 是个“看起来很美”的工具，但它依赖输入色彩的纯净度，也受浏览器渲染策略制约。实际项目里，先确认 SVG 结构是否支持，再决定要不要上 filter；多数时候，直接换 color 更稳、更易维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
