内联 svg 的 fill 属性必须写成 fill="currentcolor"，因 fill 是 html 属性而非 css 属性，大小写敏感且需写在 根标签上透传；须清除源码中所有硬编码颜色，父容器需显式设置有效 color 值， 和伪元素中 currentcolor 无效。
内联 SVG 的 fill 属性必须写成 fill="currentColor"，不是 CSS 规则
很多人试图用 svg path { fill: currentColor; } 控制内联 SVG 图标颜色，结果失效。根本原因是：内联 SVG 的 <path></path> 元素的 fill 是 HTML 属性（attribute），不是 CSS 属性（property）。浏览器只认字符串值 "currentColor"，且大小写敏感——"currentcolor" 或 "CURRENTCOLOR" 都不生效。
正确做法是直接在 HTML 中写：
<svg viewbox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
-
fill="currentColor"写在<svg></svg>根标签上即可透传给所有子图形（<path></path>、<circle></circle>等），无需重复写 - 必须删掉 SVG 源码里所有硬编码的
fill="#333"、stroke="red"或style="fill: black"，否则会覆盖currentColor - 如果图标含描边，同样要确保
stroke="currentColor"或根标签统一设stroke="currentColor"
父容器必须有可继承的 color 值，不能靠“默认”或“未设置”
currentColor 不是从父级“读取” color，而是取当前元素自身最终计算出的 color 值。如果该元素没显式设 color，又没被祖先链继承到有效值，它就会退化为浏览器默认黑（rgb(0, 0, 0)），不是透明，也不是“自动适配”。
- 常见翻车点：
<p class="icon-text"><svg fill="currentColor">...</svg>文本</p>，但.icon-text没写color—— 此时 SVG 就是黑的 - 稳妥做法：统一在父容器（如
button、.nav-link）设color: var(--primary);或color: #007bff; -
color: inherit可以用，但前提是它的父级已有生效的color；color: unset或color: initial会中断继承链，导致currentColor失效 - 用 DevTools 查看 computed
color值，确认它确实是你要的颜色，而不是rgb(0, 0, 0)
<img src="icon.svg"> 和伪元素 ::before 中的 currentColor 完全无效
这两种加载方式彻底隔离样式上下文：<img> 把 SVG 当作外部资源渲染，content: url(icon.svg) 在伪元素中创建的是独立图像上下文——currentColor 在那里连解析机会都没有，一律回退为黑色。
- 必须改用内联 SVG：把 SVG 代码直接贴进 HTML，或通过 JS 动态注入（如
innerHTML） - 若用雪碧图或
<use href="#icon"></use>，需确保引用的符号定义（<symbol></symbol>）内部也清除了所有硬编码颜色，并用<svg><use></use></svg>包裹后，再对最外层svg设fill="currentColor" - 字体图标（如 iconfont）本质是文字，只要父容器设了
color，它就自然继承，无需额外加color: currentColor—— 多写反而可能因优先级覆盖破坏继承
深色模式与主题切换时，currentColor 会自动响应，但别忘了对比度
当配合 @media (prefers-color-scheme: dark) 或 CSS 自定义属性（如 color: var(--text-primary);）时，currentColor 会实时跟随变化，SVG 图标、边框、阴影全部同步更新——这是它最优雅的地方。
- 但要注意：深色背景下，如果
color设得太浅（如#ffffff），而 SVG 图标本身路径复杂或描边过细，可能影响可访问性 - 不要假设
currentColor总是“可用”：它只在支持<color></color>类型的属性上生效（fill、stroke、border-color、text-shadow等），不能用于background-image或mask-image - IE9+ 和所有现代浏览器均原生支持，无需前缀；但若项目仍需兼容 IE8，就得放弃
currentColor改用 CSS 变量 + JS 回退
真正容易被忽略的是：currentColor 的“优雅”完全依赖于结构干净——SVG 源码无残留颜色、HTML 层级 color 设置明确、加载方式符合规范。少一个条件，它就静默变黑，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
