83399
Question:
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
<a href="https://i.stack.imgur.com/xQpjH.png" rel="nofollow"><img alt="End Result Expected" class="b-lazy" data-src="https://i.stack.imgur.com/xQpjH.png" data-original="https://i.stack.imgur.com/xQpjH.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
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 <a href="http://caniuse.com/#feat=svg" rel="nofollow">this article</a> 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 <a href="http://jsfiddle.net/manofgod/omat2km1/" rel="nofollow">Jsfiddle</a> . Note Jsfiddle does not allow meta tag
<strong>How to make an svg masked image compatible with Internet Explorer ?</strong>
Tks
Answer1: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)
}
<pre class="snippet-code-html lang-html prettyprint-override"> <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>'
<a href="https://i.stack.imgur.com/v6JCy.png" rel="nofollow"><img alt="IE 11 screenshot" class="b-lazy" data-src="https://i.stack.imgur.com/v6JCy.png" data-original="https://i.stack.imgur.com/v6JCy.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
