内联 svg 必须用 css 控制样式，禁用内联 fill/stroke 和 style 属性，否则破坏主题切换与 :hover；应删子元素颜色属性，用 fill="currentcolor" 配合父级 color 控制颜色，并注意 ie11 等兼容性限制。
内联 SVG 的样式必须靠 CSS 控制，不能靠 style 属性或硬编码 fill/stroke —— 否则颜色锁死、主题切换失效、:hover 不响应。
为什么 style="fill:red" 会破坏 SVG 可维护性
设计工具导出的 SVG 常带内联 fill="#222" 或 style="fill:#000"，这会直接覆盖外部 CSS 规则，导致：svg path { fill: var(--primary) } 完全无效。浏览器按优先级：元素上 style > 内联属性（如 fill） > 外部 CSS。
- 删掉所有
<path></path>、<circle></circle>等子元素上的fill、stroke、style属性 - 只保留
<svg></svg>标签上的viewBox、width、height - 把需要变色的部分统一设为
fill="currentColor"或stroke="currentColor"
currentColor 怎么配合 CSS 控制颜色
currentColor 是个“代理值”，它取自父元素或自身继承的 color 属性。只要没被重置，就能联动文字色、主题色、伪类状态。
- 给
<svg class="icon"></svg>加color: #007bff，内部所有fill="currentColor"就自动变蓝 - 深色模式下只需改
:root { color-scheme: dark; --text: #eee; }+.icon { color: var(--text) } -
svg.icon:hover { color: #dc3545; }能同时触发所有子元素颜色变化，无需重复写path:hover
:hover 和动画在内联 SVG 中怎么生效
内联 SVG 的 DOM 是完全暴露的，:hover 可以作用于 <svg></svg> 自身，也能穿透到子元素——但前提是没用硬编码颜色或 !important 锁死。
- 安全写法：
svg.icon:hover path { fill: #007bff; transition: fill 0.2s; } - 更推荐：
svg.icon:hover { color: #007bff; }+ 子元素保持fill="currentColor"，减少选择器复杂度 - 避免在 SVG 内部写
<style>path{fill:red}</style>，这类内联<style></style>在部分旧安卓 WebView 中会被忽略 - 动画建议用 CSS
transform（如scale、rotate），不要用fill动画——IE11 不支持fill的 CSS 动画
IE11 和旧安卓 WebView 的兼容雷区
这些环境支持内联 SVG，但对现代写法容忍度极低。一个 currentColor 或 <use href="#x"></use> 就可能让整个图标消失。
- 必须显式声明
xmlns="http://www.w3.org/2000/svg"属性（虽然现代浏览器可省略） - 禁用
<use></use>引用外部符号，包括<use href="#icon"></use>和<use xlink:href="#icon"></use> - 避免
viewBox="0 0 0 0"或负值，IE11 会静默丢弃整个<svg></svg> - 如果必须兼容 IE11，所有颜色改用具体值（如
fill="#333"），放弃currentColor和 CSS 变量联动
真正难的不是写对第一版，而是后续维护时没人记得当初删过哪些 fill 属性、有没有漏掉 stroke、currentColor 是否被某处 color: inherit 截断——建议把清理步骤固化为构建脚本或 ESLint 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
