svg内联标签的样式会变成全局样式，因为浏览器将其解析为普通css规则并注入文档样式表，如svg { background: white; }会匹配所有元素；angular等框架的视图封装对此无效，因其仅作用于组件模板而非svg子树。
内联SVG里的
因为浏览器不给它局部作用域。SVG内部的<style></style>标签和HTML里的一样，解析后就是普通CSS规则，会直接注入到文档样式表中——svg { background: white; }这种规则，会匹配页面上所有<svg></svg>元素，不是只管自己。
Angular等框架的视图封装对动态插入的SVG内部<style></style>也无效，它只封组件模板，不封SVG子树。
- 别在SVG源码里写
<style></style>，哪怕只有一行 - 把所有样式逻辑抽出来，用类名控制，比如给SVG加
class="icon-download" - 在外部CSS里写
.icon-download path { fill: currentColor; }，而不是塞进SVG里
fill: currentColor 为什么有时候没反应？
currentColor只继承父元素的color计算值，跟background-color、border-color完全无关。你给按钮设了background-color: #007bff，但没设color，图标就还是默认黑色。
- 必须显式设置父级的
color，哪怕只是color: inherit; - IE 不支持
fill: currentColor，Edge 12+ 才开始支持；要兼容 IE，得 fallback 到预设类（如.icon-blue）或 JS 注入 - 伪元素里用
content: url(icon.svg)时，currentColor一定失效——这不是内联SVG，没有DOM节点参与样式计算
为什么加了class却看不到fill变化？
最常见原因：SVG源码里<path></path>自带fill="#000"这类内联属性。它的优先级高于外部CSS类，.active { fill: red; }直接被无视。
- 手动删掉所有
path、circle、rect上的fill、stroke属性（保留viewBox、d等结构属性） - 确认
<svg></svg>标签本身也没写style="fill: ..." - 用Figma/Illustrator导出时，勾选“清除颜色属性”；或批量替换
fill="[^"]*"为空
SVG尺寸为0导致内容不可见
内联<svg></svg>若没设width/height，又没被父容器撑开，计算宽高可能为0。这时候即使classList.toggle()成功、fill也改了，你也看不见——它根本没渲染空间。
- 要么在
<svg></svg>上直接写width="1em" height="1em" - 要么用CSS强制：例如
.icon { width: 1.2em; height: 1.2em; } - 父容器如果是
display: flex或grid，记得检查是否设置了align-items或justify-content导致SVG被挤出可视区
fill、没声明的尺寸、还有藏在<style></style>标签里的“全局污染”。处理SVG，得把它当HTML DOM来修，而不是当图片来贴。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
