Question

我尝试在html页面上显示svg图标。在chrome和其他浏览器上运行正常，但在Edge和Internet Explorer上，该图标未显示。我在CSS中制作了智慧面具。

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>

在Internet Explorer上，它显示一个白色正方形（我认为这是CSS中的默认类）。

谢谢！

Answer 1

根据caniuse.com，Internet Explorer完全不支持掩码，并且Edge仅部分支持此功能。在这里看看：https://caniuse.com/#search=mask

蒙版SVG图像不会显示在资源管理器和边缘上

1 个答案: