svg内联时fill不继承父元素颜色是因为其子元素（如path、circle）默认带有内联fill属性（如fill="#000"），优先级高于css继承；必须将各子元素fill显式设为"currentcolor"并确保父容器设置了color值，才能实现颜色继承。
SVG内联时fill为什么没继承父元素颜色？
直接把SVG代码粘贴进HTML（即内联SVG），fill默认值是black，不是currentColor。哪怕父元素设置了color: red，图标也不会变红——这是最常被忽略的起点。
解决办法很简单：把SVG里的fill属性值显式改成currentColor，它才会响应父级color变化。
- 原始SVG中类似
<path fill="#333"></path>要删掉或覆盖为fill="currentColor" - 如果SVG含多个
fill（比如<circle></circle>、<rect></rect>），每个都要改，或统一用style="fill: currentColor" - 别依赖CSS里写
svg { fill: currentColor }——这只能影响没设fill属性的元素，有内联fill会优先级更高
用currentColor后，哪些CSS操作能生效？
currentColor本质是取父元素计算后的color值，所以所有能影响color的CSS规则都间接控制图标颜色：
-
a:hover { color: #007bff }→ 图标随链接悬停变蓝 -
.btn-primary { color: white }→ 白色文字按钮里图标也变白 -
body { color: #666 }→ 全局文字色变灰，图标同步 - 注意：
opacity会影响整个SVG（包括描边、透明度），但不改变currentColor本身
外部SVG文件（<img src="icon.svg">）能继承颜色吗？
不能。<img>加载的SVG是独立文档上下文，完全隔离于页面CSS，currentColor失效，fill写死就是写死。
想让它响应父级颜色，必须换方案：
- 改用
<svg></svg>内联（推荐，可控性强） - 或用
<object></object>，但需在SVG文件内部定义fill="currentColor"，且确保没有fill内联属性覆盖 - CSS
filter: invert()之类属于“障眼法”，不能精准匹配任意色，慎用
React/Vue里动态改SVG颜色要注意什么？
框架组件化后容易误以为JS变量绑定就能驱动颜色——其实关键仍在SVG属性本身是否用了currentColor。
- Vue模板中写
<svg :style="{ fill: textColor }"></svg>可行，但破坏了继承语义，且需手动同步所有子元素 - React中用
dangerouslySetInnerHTML注入SVG时，务必预处理：替换所有fill="xxx"为fill="currentColor" - 第三方图标库（如Heroicons）默认导出带
fill="currentColor"的SVG，可直接用；但有些UI库（如早期Ant Design）输出的是<img>，就不行
真正省心的做法，是让SVG源码从一开始就没写死fill，只留fill="currentColor"或干脆不写（靠CSS fallback）。否则每次插入都要手动擦除或覆盖，迟早漏掉某个<path></path>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
