How to make an svg masked image compatible with In

Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg

This is my svg code

<svg width="0" height="0" viewBox="0 0 160 160">
  <defs>
    <clipPath id="shape">
      <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
    </clipPath>
  </defs>
</svg>

<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />

And this is my css

* {
  padding: 0;
  margin: 0;
}
.photo_rectangle_inverse {
  height: 160px;
  width: 170px;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  position: relative;
  -webkit-transform: translateZ(1px)
}

Since the svg was not working in Internet Explorer (IE 11), after reading this article that talks about compatibility issue with Browsers, I added

<meta http-equiv="X-UA-Compatible" content="IE=edge">

To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.

But still the svg shape is not displaying.

Here is a Jsfiddle . Note Jsfiddle does not allow meta tag

How to make an svg masked image compatible with Internet Explorer ?

Tks

标签： css css3 internet-explorer svg

1条回答

等我变得足够好

2楼-- · 2019-06-03 15:05

IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an <html> img element e.g.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
  width: 100%;
}

.photo_rectangle_inverse {
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  position: relative;
  -webkit-transform: translateZ(1px)
}

    <svg height="100%" width="100%" >
      <defs>
        <clipPath id="shape">
          <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
        </clipPath>
      </defs>

      <image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/>
      <image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
    </svg>'

0人赞添加讨论(0) 举报

How to make an svg masked image compatible with In

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间