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 里（），不能用 —— 后者完全隔离样式
• 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 输出固定 标签），filter 是唯一纯 CSS 途径，但它有硬伤：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

• 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')，为空再设
• 更彻底的解法：把变量声明放在 标签里，且置于所有外链 CSS 之前，确保它最先被解析

真正容易被忽略的是：SVG 路径里若写了内联 fill="#000"，它会强制覆盖 CSS 中的 fill 声明。哪怕你用了 !important，也无效——内联样式优先级更高。所以批量处理 SVG 时，得先清理掉所有 fill、stroke 属性，只留结构。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！