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不允许使用元标记

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

韩国社交协会

Answer 1

IE不会将SVG剪辑应用于html元素，因此您需要一个SVG <image>元素而不是<html> img元素，例如。

＆＃13;

* {
  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)
}

＆＃13;

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

＆＃13;

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

1 个答案: