SVG 图标在 Internet Explorer 中不起作用答案

【问题标题】：SVG Icons not working in Internet ExplorerSVG 图标在 Internet Explorer 中不起作用
【发布时间】：2020-01-06 02:09:37
【问题描述】：

在我的 Web 应用程序中，我使用的是 SVG 图标，主要原因是我使用的数据不是多租户设计。我尝试了很多选项，但在 Internet Explorer 中几乎每个版本都不起作用。它显示 op 就像一个 o 填充块。

工作代码：Chrome / Mozilla / Safari

HTML:
<div class="svg_icon" id="icon_business"></div>

CSS:
#icon_business {
    -webkit-mask-image: url(/svg/business.svg);
}
.svg_icon {
    width: 100%;
    height: 80px;
    text-align: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position-x: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: #00E3A7;
}

有人可以帮我吗？处理这个问题的最佳方法是什么？有没有办法与 IE 8 + 一起工作

【问题讨论】：

实际上我无法让它在 Firefox (68.0.2) 上运行 -> 全白或 Edge (17.17134) -> 全绿。我做了一个小提琴，因为我们无法访问您的 svg 图片：the fiddle。请注意，from MDN 根本不支持 Internet Explorer for mask-image
由于 IE 不支持 mask-image，作为一种解决方法，您可以使用 SVG 星形吗？如果是，那么您可以参考此示例。它正在与 IE 一起使用。参考：textuploader.com/1r4n0

标签： css internet-explorer svg internet-explorer-8 internet-explorer-11

【解决方案1】：

您应该使用背景图片。 IE8 也不支持 SVG，请参阅 here。

这应该适用于 IE8 以上的所有内容：

#icon_business {
  background-image: url('https://mdn.mozillademos.org/files/12676/star.svg');
}
.svg_icon {
  display: block;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  background-color: #00E3A7;
}

要针对 IE8，您可以将其放在 HTML 文件的顶部：

<!DOCTYPE html>
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->

然后使用 ie8 类。使用后备图片 (png/jpg/gif)

.ie8 #icon_business {
  background-image: url('https://mdn.mozillademos.org/files/12676/star.png');
}

或者使用一些javascript。

【讨论】：

非常感谢，要试试这个！！很棒
@Maradilly，这个问题有进展吗？如果您找到了解决方案，请尝试将其发布为答案，并尝试在 48 小时后将您自己的答案标记为该问题的已接受答案（当它可以标记时）。如果问题仍然存在，请尝试参考线程上的建议并让我们知道您对此问题的状态。我们将努力提供进一步的建议。感谢您的理解。
@Deepak-MSFT，对不起，Stackoverflow 的新手。它不起作用，此解决方案使背景变为绿色，但线条图标不起作用。我正在研究解决方案，但我正在使用 Gulp，所以没有找到解决方案。 svgicons.sparkk.fr 正在做这个。
是否有可能使用我在之前评论中建议的 SVG 形状？由于 IE 不支持 mask-image，如果您在应用中小规模使用 svg 图标，则可以解决此问题。