Css 如何使svg屏蔽图像与Internet Explorer兼容

最近，我创建了一个svg蒙面图像，它在Chrome上运行得非常好，但在我的Internet explorer版本中不起作用。下面是我的svg的最终结果

这是我的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' />

由于svg在InternetExplorer（IE11）中不起作用，在阅读了有关浏览器兼容性问题的文章后，我补充道

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

因为基于本文的IE Edge似乎是与Svg最兼容的

但是svg图形仍然没有显示

这是一本书。注意：JSFIDLE不允许元标记

如何使svg屏蔽图像与Internet Explorer兼容？

---

Tks

IE不会将SVG片段应用于html元素，因此您需要SVG

元素，而不是html

元素，例如

*{
填充：0；
保证金：0；
}
html，正文{
身高：100%；
宽度：100%；
}
.照片\u矩形\u反向{
-webkit剪辑路径：url（#形状）；
剪辑路径：url（#形状）；
位置：相对位置；
-webkit转换：translateZ（1px）
}

“

怎么办？你能不能更具体一点，或者根据我已经写的内容给我举个例子？谢谢，它起作用了。但是，它不显示形状的左角。它切断了它。你能帮我解决吗？你可以加上这个作为答案，这样我可以验证它。谢谢，但是请告诉我如何像我在问题中所做的那样在同一行上显示两个图像。你给我的答案只显示一张图片。是的，先生，但这是我问题的一部分。你能帮我解决这个问题吗？谢谢，我已经做到了。在答案中按RunCodeSnippet。有两个图像。先生，当我运行代码段时，它在一行上只显示一个图像。截图我在回答中添加了一个截图。这是我按下RunCodeSnippet时看到的。我不知道你是怎么得到一张照片的。

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