css - SVG 图标在 Internet Explorer 中不起作用

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

在我的 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/

相关文章:

javascript - 如何允许 svg 在链接中可点击

css - Internet Explorer 10 中的错误,表中有 flexbox

css - 帮助在 IE 中隐藏 css 弹出窗口

jquery - 半六边形悬停效果

javascript - Velocity.js 中的动画颜色变化

svg - 克隆 svg 组

html - overflow hidden 的div中的中心图像

flash - Flash:同一页面上有许多相同的SWF

css - IE 不在 <ul> 中显示 <li>(z-index 问题?)

css - VS 代码扩展以突出显示重复的 css 属性