时间戳

首页 > 解决方案 > SVG 图标在 Internet Explorer 中不起作用

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

问题描述

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

工作代码：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 + 一起使用

标签： cssinternet-explorersvginternet-explorer-8internet-explorer-11

解决方案

您应该使用背景图片。IE8 也不支持 SVG，请参见此处。

这应该适用于 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。

推荐阅读