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

Posted 2023-03-06

【中文标题】如何使 svg 蒙版图像与 Internet Explorer 兼容

【英文标题】：How to make an svg masked image compatible with Internet Explorer

【发布时间】：2015-11-17 20:02:02

【问题描述】：

最近我创建了一个 svg 蒙版图像，该图像在 Chrome 中完美运行，但在我的 Internet Explorer 版本中无法运行。这是我的 svg 预期的最终结果

这是我的 svg 代码

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

？

Tks

【问题讨论】：

请问如何？您能否更具体一点，或者根据我已经写过的内容给我一个例子？ Tks

感谢它正在工作。但是它不显示形状的左角。它削减它。你能帮我解决吗？您可以将此添加为答案，以便我可以验证它。 jsfiddlejsfiddle.net/manofgod/omat2km1/3

【参考方案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   >
      <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   xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/>
      <image transform="translate(170,0)"   xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
    </svg>'

【讨论】：

谢谢，但请如何在同一行显示两个图像，就像我在问题中所做的那样。你给我的答案只显示一张图片。 jsfiddlejsfiddle.net/manofgod/omat2km1/5

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

我已经做到了。在答案中按运行代码 sn-p。有两张图片。

请先生，当我运行代码 sn-p 时，它在一行上只显示一个图像。截图i.imgur.com/xiejUQg.png

我在答案中添加了屏幕截图。这是我按下运行代码 sn-p 时看到的。我不知道你是怎么得到一张图片的。