如何使svg蒙版图像与Internet Explorer兼容

最近，我创建了一个svg蒙版图像，它在Chrome中完美工作，但在我的Internet Explorer版本中无法正常工作。下面是我的SVG预计最终的结果如何使svg蒙版图像与Internet Explorer兼容

这是我的SVG代码

<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' />

这是我的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) 
}

由于SVG不是在互联网工作浏览器（IE 11），在阅读this article，谈到与浏览器的兼容性问题后，我添加了

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

我的页面顶部因为基于IE Edge的文章似乎与Svg最兼容。

但仍然显示svg形状。

这是Jsfiddle。注意Jsfiddle不允许元标记

如何使svg蒙版图像与Internet Explorer兼容？

韩国社交协会

来源

2015-08-24 Man Of God

如何吗？你可以更具体一些，或者给我一个基于我已经写过的例子吗？ Tks –

感谢它的工作。但它不显示形状的左角。它削减它。你能帮我解决吗？你可以添加这个答案，以便我可以验证它。 Jsfiddle http://jsfiddle.net/manofgod/omat2km1/3/ –

IE将不适用的SVG夹到一个HTML元素，因此你需要一个SVG <image>元素，而不是如一个<html> img元素

* { 
 
    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>'

来源

2015-08-24 13:22:17

谢谢，但请如何在同一行上显示两个图像，就像我在问题中所做的一样。你给我的答案只显示一个图像。 Jsfiddle http://jsfiddle.net/manofgod/omat2km1/5/ –

是的，先生，但它是我的问题的一部分。你能帮我解决吗？谢谢 –

我已经做到了。在答案中按运行代码片段。有两个图像。 –

如何使svg蒙版图像与Internet Explorer兼容

回答

相关问题