遮罩 svg 图像不会显示在资源管理器和边缘上

我尝试在 html 页面上显示一个 svg 图标。在 chrome 和其他运行正常的浏览器上，但在边缘和互联网浏览器上，图标不会出现。我在 css 中制作了它 witk 掩码。

body{ 
  background: #000;
}
.default {
  background-color: #fff;
  width:45px;
  height:45px;
}
.icon {
  mask:url('./icons/network.svg') no-repeat center center;
  -webkit-mask: url('./icons/network.svg') no-repeat center center;
  mask-size:90px auto;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css">
    <title>Icons</title>
  </head>
  <body>
    <image  class="default icon"></image >
  </body>
</html>

在IE浏览器上，它显示一个白色正方形(我认为是css中的默认类(。

提前感谢！

根据

caniuse.com，Internet Explorer根本不支持掩码，边缘仅部分支持此功能。看看这里： https://caniuse.com/#search=mask

相关内容

最新更新

热门标签：