在我的 Web 应用程序中,我使用 SVG 图标,主要原因是我使用的数据不是用于 Multi-Tenancy 设计。我已经尝试了很多选项,但在几乎每个版本的 Internet Explorer 中,它都不起作用。它显示 op 就像一个 o 填充 block 。
工作代码: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 + 一起使用
最佳答案
你应该使用背景图片。 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。
关于css - SVG 图标在 Internet Explorer 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57767092/