SVG 图标在 Internet Explorer 中不起作用
Posted
技术标签:
【中文标题】SVG 图标在 Internet Explorer 中不起作用【英文标题】：SVG Icons not working in 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 formask-image
由于 IE 不支持 mask-image，作为一种解决方法，您可以使用 SVG 星形吗？如果是，那么您可以参考此示例。它正在与 IE 一起使用。参考：textuploader.com/1r4n0
【参考方案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，对不起，*** 的新手。它不起作用，此解决方案使背景变为绿色，但线条图标不起作用。我正在研究解决方案，但我正在使用 Gulp，所以没有找到解决方案。 svgicons.sparkk.fr 正在做这个。 是否有可能使用我在之前评论中建议的 SVG 形状？由于 IE 不支持 mask-image，如果您在应用中小规模使用 svg 图标，则可以解决此问题。以上是关于SVG 图标在 Internet Explorer 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Internet Explorer 中查找父“SVG”元素
Internet Explorer 在矩阵变换时扭曲 SVG 图像
无法在 Internet Explorer 8 中显示 SVG 图表