如何修复CSS svg-fill在IE11下无法通过类名修改颜色_使用嵌入式SVG代码-css教程-PHP中文网

ie11中fill: currentcolor在内联svg中不生效，因ie将fill="currentcolor"视为非法值而回退为black；需清除所有内联fill属性，用css通过父元素color控制，并避免链式继承与多色场景下的currentcolor滥用。

如何修复css svg-fill在ie11下无法通过类名修改颜色_使用嵌入式svg代码

IE11里`fill: currentColor`为啥有时不生效

不是currentColor本身不支持——IE11确实支持它，但只在CSS声明中有效；如果SVG源码里写了fill="currentColor"（注意这是字符串字面量），IE会当成非法值，直接回退到fill: black。这是最常被忽略的兼容性坑：开发时用Chrome看着正常，一测IE11就全黑。

必须用内联SVG，且清除所有内联`fill`属性

IE11对样式继承更严格，任何残留的内联fill都会覆盖CSS。操作前务必检查并删掉这些内容：

<path fill="#333"></path> → 直接删掉fill属性
<circle fill="red"></circle> → 删掉fill，或改写为fill="currentColor"（仅限CSS控制时）
<defs><style>.cls-1{fill:#000}</style></defs> → 整段删掉，避免CSS-in-SVG干扰

给`<svg></svg>`加`fill: currentColor`，再靠父元素`color`驱动

别在<svg></svg>上设color指望子元素继承——IE11不支持svg { color: red; } + path { fill: currentColor; }这种链式继承。正确做法是把color设在SVG的直接父容器上：

<button class="btn-primary">
  <svg class="icon"><path d="M10 10..."></path></svg>
  提交
</button>

CSS写成：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.btn-primary .icon {
  fill: currentColor;
}
.btn-primary {
  color: #007bff;
}

这样IE11才能正确读取并应用颜色。

多色SVG在IE11里不能靠`currentColor`统一控制

如果一个SVG有红蓝两色路径，又必须兼容IE11，就别碰currentColor。老实用class逐个控制：

原始SVG里给路径加class：<path class="icon-primary" d="..."></path>、<path class="icon-secondary" d="..."></path>
CSS里分开写：.icon-primary { fill: #007bff; }、.icon-secondary { fill: #6c757d; }
hover或状态切换时，只改class，不依赖继承

IE11对:hover和class选择器支持稳定，这是最可控的方案。别用path:nth-child(1)这类结构选择器——图标结构稍一调整就全乱。