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

Question

最近我创建了一个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' />

这是我的 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在Internet Explorer（IE 11）中无法工作，阅读this article后发现浏览器兼容性问题，因此我添加了以下内容：

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

基于这篇文章，IE Edge似乎是与Svg最兼容的，因此我希望将其置于页面顶部。

但是，Svg形状仍未显示。

这里是一个Jsfiddle。请注意，Jsfiddle不允许meta标签。

如何使svg遮罩图像与Internet Explorer兼容？

谢谢

- Man Of God

---

怎么办？你能具体说一些或者根据我已经写的东西给我一个例子吗？谢谢。 - Man Of God

谢谢，它正在工作。但是它没有显示形状的左上角，而是将其裁剪了。你能帮我解决一下吗？你可以将这个作为答案添加，这样我就可以验证它了。Jsfiddle http://jsfiddle.net/manofgod/omat2km1/3/ - Man Of God

Answer 1

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

- Robert Longson

---

谢谢，但请问如何像我在问题中所做的那样，在同一行上显示两张图片。你给我的答案只显示了一张图片。Jsfiddle链接：http://jsfiddle.net/manofgod/omat2km1/5/ - Man Of God

是的，先生，但这也是我的问题的一部分。您能帮我解决吗？谢谢。 - Man Of God

我已经完成了。在答案中按“运行代码片段”。有两张图片。 - Robert Longson

先生，当我运行代码片段时，它只在一行上显示一张图片。截图请见http://i.imgur.com/xiejUQg.png。 - Man Of God

我已经在我的答案中添加了一张截图。这是我按下“运行代码片段”时看到的内容。我不知道你是如何得到一张图片的。 - Robert Longson