SVG内联时fill/stroke可响应--icon-color，但需写在HTML中、用var(--icon-color,currentColor)并设父级color；避免内联fill值、慎用filter调色、JS设变量前需检查CSS加载状态。
直接用 --icon-color 配合 fill 或 stroke
SVG内联时，fill 和 stroke 能直接响应 CSS 自定义属性，无需额外 wrapper。关键不是“能不能”，而是“怎么确保它生效”：
- 必须把 SVG 写在 HTML 里（
<svg><path fill="currentColor"></path></svg>），不能用<img src="icon.svg" alt="如何在CSS3中使用自定义属性动态控制SVG图标的主题颜色？" >—— 后者完全隔离样式 -
fill值写成var(--icon-color, currentColor)，提供 fallback，避免未定义变量时图标变黑/透明 - 父容器要设
color或显式声明--icon-color，否则变量无来源（currentColor会退到继承链最上层的color）
currentColor 和 var(--icon-color) 混用的边界场景
很多人想“自动继承文字色，但 hover 时用主题色”，这时别硬套一个变量，而是分层控制：
- 默认态：用
fill: currentColor—— 简单、兼容性好、不依赖 JS - 主题切换态：加一个 class 如
.theme-dark，里面覆盖--icon-color: #222，再让fill读这个变量 - 不要写
fill: var(--icon-color, currentColor)然后指望它“智能 fallback”——某些旧版 Safari 对var()在fill中的解析不稳定，直接失效
动态改色时，filter: hue-rotate() 是备选，不是首选
当 SVG 无法内联（比如 CMS 输出固定 <img alt="如何在CSS3中使用自定义属性动态控制SVG图标的主题颜色？" > 标签），filter 是唯一纯 CSS 途径，但它有硬伤：
-
filter: hue-rotate(90deg) saturate(1.5)只能调色调/饱和度，无法精确指定十六进制色值 - 叠加多个
filter（如brightness+contrast）容易导致颜色失真，尤其在深色背景上 - 性能比原生
fill差，滚动或动画中易掉帧；iOS Safari 16.4 之前对filter的 SVG 支持有渲染 bug
JS 注入变量前，先检查 :root 是否已存在
用 JS 动态设主题色时，常见错误是直接 document.documentElement.style.setProperty('--icon-color', '#345')，但没确认 CSS 文件是否已加载：
立即学习“前端免费学习笔记（深入）”；
- 如果 CSS 在 JS 后加载，变量声明会被覆盖（CSS 中的
:root { --icon-color: #000 }优先级高于 JS 设置） - 稳妥做法：JS 先读取
getComputedStyle(document.documentElement).getPropertyValue('--icon-color')，为空再设 - 更彻底的解法：把变量声明放在
<style></style>标签里，且置于所有外链 CSS 之前，确保它最先被解析
真正容易被忽略的是：SVG 路径里若写了内联 fill="#000"，它会强制覆盖 CSS 中的 fill 声明。哪怕你用了 !important，也无效——内联样式优先级更高。所以批量处理 SVG 时，得先清理掉所有 fill、stroke 属性，只留结构。
