CODEWITHSUNDEEP
htmlcss
muscaa
muscaa

Reputation: 41

Mask svg images don't show on explorer and edge

I try to display a svg icon on a html page. On chrome and other browser that works fine but on edge and internet explorer the icon don't appear. I made it witk mask in 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>

On internet explorer it displays a white square ( i think is the default class in css).

Thanks in advance !

Upvotes: 0

Views: 157

Answers (1)

Fitzi
Fitzi

Reputation: 1673

According to caniuse.com Internet Explorer does not support mask at all and edge only partially supports this feature. Have a look here: https://caniuse.com/#search=mask

Upvotes: 1

Related Questions