内联SVG时直接用fill最可靠，但需删除源码中fill等内联属性；CSS的fill必须作用于path等子元素而非svg标签；img引入的SVG无法通过CSS fill控制；currentColor可实现颜色继承，IE不支持需降级。
SVG内联时直接用fill设置颜色最可靠
内联到HTML里的<svg></svg>，fill能直接生效，不需要额外CSS选择器。但注意：如果SVG里元素自带fill属性（比如<path fill="#000"></path>），它会覆盖外部CSS的fill声明——这是最常见的“改了没反应”原因。
- 优先删掉SVG源码里所有
fill、stroke等内联样式属性 - 给
<svg></svg>加class，比如<svg class="icon"></svg>，再写.icon path { fill: #333; } - 如果要用
:hover变色，确保选中的是路径级元素（path、circle等），不是整个<svg></svg>标签
CSS里用fill必须作用在图形子元素上
svg标签本身不响应fill，只有它的子元素（path、rect、circle等）才支持。写svg { fill: red; }完全无效。
- 正确写法：
svg path { fill: currentColor; }（配合color继承更灵活） - 如果SVG有多个
path，又想统一控制，建议加统一class：<path class="svg-fill"></path>，再写.svg-fill { fill: blue; } - 避免用
svg * { fill: ... }——会误伤text、tspan等不支持fill的元素，触发渲染异常
外部SVG文件用<img alt="CSS如何控制SVG的填充颜色_通过fill属性修改矢量图css" >标签时fill完全不起作用
<img src="icon.svg" alt="CSS如何控制SVG的填充颜色_通过fill属性修改矢量图css" >是独立文档上下文，CSS无法穿透。这时候fill改不了，连currentColor都无效。
- 想动态换色？只能改用
<object></object>或<iframe></iframe>（兼容性差），或者干脆内联SVG - 构建时可用工具（如SVGR）把SVG转成React组件或内联
<svg></svg>，绕过<img alt="CSS如何控制SVG的填充颜色_通过fill属性修改矢量图css" >限制 - 如果必须用
<img alt="CSS如何控制SVG的填充颜色_通过fill属性修改矢量图css" >，颜色只能靠预生成多版本（icon-red.svg、icon-blue.svg）
用currentColor实现主题色联动最省事
把fill设为currentColor，就能让SVG颜色自动跟随父元素的color值，适合按钮图标、文字旁小图标这类场景。
立即学习“前端免费学习笔记（深入）”；
- 示例：
<span style="color: #f00"><svg><path fill="currentColor" d="..."></path></svg></span> - 配合CSS变量更灵活：
svg { --icon-color: #222; } path { fill: var(--icon-color); } - 注意：IE不支持
currentColor在fill里使用（Edge 12+ OK），需要降级方案时得用JS或预设色类
SVG的fill行为高度依赖加载方式和DOM结构层级，最容易忽略的是内联属性优先级和<img alt="CSS如何控制SVG的填充颜色_通过fill属性修改矢量图css" >的沙箱限制——这两点卡住的人最多。
