如何使SVG遮罩的图像与Internet Explorer兼容

* { 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>' 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 svgThis 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 tagHow to make an svg masked image compatible with Internet Explorer ?Tks 解决方案 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>' 这篇关于如何使SVG遮罩的图像与Internet Explorer兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！