currentColor方案最轻量兼容性好，但仅适用于内联SVG；因img引入的SVG处于隔离上下文，无法继承父级color值，故必须内联或改用CSS变量等替代方案。
直接用 currentColor + fill="currentColor" 是最轻量、兼容性最好、也最符合语义的动态着色方案；CSS 变量适合需要多主题或运行时切换颜色的场景，但必须配合内联 SVG 才能生效。
为什么 currentColor 在 <img alt="CSS如何为SVG图标动态注入颜色_使用currentColor与CSS变量" > 里完全不工作
因为 <img src="icon.svg" alt="CSS如何为SVG图标动态注入颜色_使用currentColor与CSS变量" > 加载的是一个隔离的文档上下文，SVG 内部样式与宿主页面 CSS 完全断连。浏览器不会把父元素的 color 值“透传”进去，currentColor 就失去了读取目标。你看到图标是黑的，不是它“没继承”，而是它根本没机会继承。
- 唯一可靠解法：把 SVG 代码复制进 HTML，即内联 SVG（
<svg><path fill="currentColor"></path></svg>） - 导出工具（如 Figma）常默认给每个
<path></path>加fill="#000"，必须手动删掉，否则会覆盖currentColor - 如果用了
<use href="#icon"></use>，确保<symbol></symbol>内部路径也没写死fill
currentColor 的真实行为：它只读计算值，不触发继承链
currentColor 不是“自动继承 color”，而是取当前元素**已计算出的** color 值。它不关心这个值从哪来——是直接写的、从父级继承的、还是通过 CSS 变量算出来的。所以它能在伪元素里失效，也能在 :deep() 下失灵，根源都是那个“计算值”为空或被截断。
- 父容器没设
color，currentColor回退到浏览器默认（通常是rgb(0, 0, 0)） -
button { color: var(--btn-text); }+<svg><path fill="currentColor"></path></svg>是合法且有效的 - Vue 的
<style scoped></style>会阻止父组件color穿透到子组件 SVG 内部，需用:deep(.icon) { color: var(--icon-color); }
CSS 变量怎么安全注入到 SVG 颜色中
变量本身不能直接写进 SVG 属性（fill="var(--color)" 是无效语法），必须靠 CSS 层绑定。正确路径只有一条：先定义变量，再用 CSS 把变量赋给 fill 或 stroke。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.icon path { fill: var(--icon-fill, currentColor); }—— 提供 fallback，避免变量未定义时图标消失 - JS 动态改色：
document.documentElement.style.setProperty('--icon-fill', '#2563eb'); - 不要在 SVG 源码里写
style="fill: var(--x)"，内联 style 优先级高于外部 CSS，变量反而被锁死 - 如果 SVG 含描边，记得同时控制
stroke: var(--icon-stroke)和stroke-width
filter 色相旋转不是 SVG 动态着色的正解
filter: hue-rotate(90deg) 看似能“换色”，但它依赖输入颜色纯净。一旦 SVG 里有多个 fill 值、混合描边/填充、或用了渐变，结果就不可控——蓝色可能转成橙色，而不是设计稿要的 brand blue。
- 真正需要动态染色的场景，95% 应该走
currentColor或 CSS 变量 - 若坚持用
filter，务必先清空所有内联fill/stroke，统一设为currentColor，再加filter -
transition必须写在filter上，且初始值不能省略（filter: hue-rotate(0deg)），否则 hover 时会跳变
最容易被忽略的一点：SVG 图标是否含 <defs></defs> 或 <lineargradient></lineargradient>。这类结构里的 stop-color 不受 fill 或 currentColor 影响，必须单独用 CSS 选中 stop 元素设置 stop-color: var(--x)，否则主题切换时那块渐变永远不变色。
