内联SVG才能用CSS动态上色，fill + currentColor是最稳组合；硬编码颜色值不灵活，currentColor自动继承父元素color，需删内联fill、确保父容器有color值、描边也设currentColor。
内联SVG才能用CSS动态上色，fill + currentColor 是最稳、最省事的组合，其他方式要么失效，要么绕远路。
为什么fill="currentColor"比硬写#ff0000更可靠
硬编码颜色值会锁死图标颜色，换主题、切暗色模式、适配可访问性设置时全得手动改；而currentColor自动取父元素的color值，只要改一次文字色，图标就跟着变。
- 必须确保 SVG 是内联写在 HTML 里的（不是
<img src="icon.svg" alt="CSS如何给SVG图标动态上色_fill属性与currentcolor变量" >） - 删掉所有路径上的内联
fill属性，比如<path fill="#333"></path>→ 改成<path></path> - 父容器要有明确的
color值，哪怕只是color: inherit;，否则currentColor会退到浏览器默认色（通常是黑色） - 如果图标里有描边（
stroke），也得同步设为currentColor，否则填色变了、描边还是黑的，视觉割裂
fill被忽略的常见原因和排查点
明明写了 .icon path { fill: currentColor; } 却没反应，大概率是样式被更高优先级规则压住了，或者 SVG 结构本身挡了路。
-
fill属性写在 SVG 源码里（如<path fill="red"></path>）——它比 CSS 选择器优先级高，得删掉或用!important强制覆盖（不推荐） -
<svg></svg>标签上有style="fill: black"这类内联样式，也会干扰子元素继承 - 用了
<use></use>引用<symbol></symbol>，但没给<use></use>元素加类或样式，它的子元素不会自动继承宿主的color - CSS 选择器没选中目标：检查是否漏了
svg path、svg circle等具体元素，别只写.icon就以为能控制所有图形
配合 hover / 主题切换的最小可行写法
不需要 JS，纯 CSS 就能响应交互和全局状态，关键是把过渡和颜色变更落在同一层。
立即学习“前端免费学习笔记（深入）”；
- 过渡要写在基础状态里：
.icon { color: #666; transition: color 0.2s ease; }，而不是只写在:hover里 - 图标内部路径统一用
fill="currentColor"，不要留空也不要用fill="none"（那会变透明） - 深色模式切换只需改根节点：
@media (prefers-color-scheme: dark) { :root { color: #e2e8f0; } }，所有currentColor图标自动响应 - 双色图标？拆成两个
<g></g>，分别加类：<g class="icon-fill">...</g><g class="icon-stroke">...</g>，再用不同 CSS 变量控制
真正容易被忽略的是：SVG 不是“图片”，它是 DOM 节点。你得把它当 HTML 元素来查结构、看计算样式、删内联属性——任何想绕过这步直接“套个 class 就变色”的想法，都会在某个深夜的调试中露出破绽。
