svg必须内联html才能被css控制，即直接写入html或动态插入innerhtml；用、background-image、等方式加载则路径元素无法被css选择和修改。
SVG必须是内联HTML，不能用<img>或background-image
用<img src="icon.svg">或CSS的background-image: url(icon.svg)加载SVG时，路径元素完全隔离在外部文件里，浏览器不把它当DOM节点处理——fill根本选不到、改不了。
真正能被CSS控制的前提只有一个：SVG代码得直接写在HTML里，也就是“内联”。比如把SVG源码复制粘贴进，或者用JavaScript动态插入innerHTML。
- ✅ 正确：把SVG文件内容读出来，用
document.body.innerHTML += svgString；或直接手写<svg><path fill="#000" ...></path></svg> - ❌ 错误：用
<object></object>、<iframe></iframe>、<img>加载SVG文件，哪怕同域也不行 - ⚠️ 注意：
<use></use>引用<symbol></symbol>时，只要<symbol></symbol>定义在当前页面DOM中（比如放在<svg style="display:none"></svg>里），再用<use href="#my-icon"></use>也是内联的，可以被CSS控制
直接给<path></path>加class或用属性选择器改fill
内联后，SVG里的<path></path>、<circle></circle>、<polygon></polygon>等图形元素就是普通DOM节点，CSS规则照常生效。但要注意优先级和继承限制。
最稳的方式是给关键路径加class，然后写对应样式：
svg .icon-fill { fill: #3b82f6; }
如果不想改HTML结构，也可以用属性选择器匹配原始fill值再覆盖：
svg path[fill="#000"] { fill: #ef4444; }
- ✅ 推荐用
class：语义清晰、可复用、易维护 - ⚠️ 避免依赖
fill初始值做选择：有些SVG导出时没写fill，靠inherit或currentColor生效，这种情况下[fill="..."]会失效 - ⚠️
fill不继承自父<svg></svg>，但支持currentColor——所以设svg { color: red; }+path { fill: currentColor; }是可行的动态方案
用currentColor联动文字色，适合主题切换场景
如果你的SVG图标要随文字颜色一起变（比如按钮里的图标、导航栏图标），硬编码fill值反而增加维护成本。currentColor是CSS原生方案，它会自动取当前元素的color值。
操作很简单：确保SVG路径没有固定fill，然后统一设为currentColor：
<svg><path d="M10 10..." fill="currentColor"></path></svg>
之后只要改父容器或自身color，图标就跟着变：
.btn-primary { color: #2563eb; } /* 图标自动变蓝 */
- ✅ 适合深色/浅色模式切换：只需切换
:root或组件的color，不用额外JS或CSS变量 - ⚠️ 注意：如果路径上写了
fill="black"，会覆盖currentColor——得删掉或用!important（不推荐）或用更精准选择器覆盖 - ⚠️
currentColor只取计算后的color值，不响应opacity变化，也不影响stroke（除非你也设stroke: currentColor）
用CSS变量配合fill实现运行时换色
需要JS动态控制颜色（比如用户点选主题色）？纯CSS也能做到，前提是把颜色抽成CSS变量，再让fill引用它。
先在SVG里用var(--icon-color, black)：
<svg style="--icon-color: #8b5cf6;"><path fill="var(--icon-color)" ...></path></svg>
然后JS只需改style里的变量值：
svgEl.style.setProperty('--icon-color', '#ec4899');
- ✅ 比直接改
style.fill更干净：不污染内联样式，方便批量控制 - ⚠️ 变量必须定义在SVG元素或其祖先上，且作用域要覆盖到
<path></path>；:root定义全局变量也行，但不够精准 - ⚠️ 不支持IE；旧版Safari对SVG内
var()支持不稳定（iOS 13.4+、macOS 10.15.4+基本OK）
CSS变量和currentColor看着差不多，但本质不同：前者是显式传参，后者是隐式继承。实际项目里，简单图标用currentColor省事，复杂配色逻辑或需独立控制时，CSS变量更可控。别忘了检查SVG是否真正在DOM里——这是所有后续操作的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
