如何使SVG遮罩的图像与Internet Explorer兼容 [英] How to make an svg masked image compatible with 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' />

这是我的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)中无法正常工作，请阅读这篇文章谈到与浏览器的兼容性问题，我添加了

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

在我的页面顶部，因为基于本文的IE Edge似乎与Svg最兼容.

但是svg形状仍然没有显示.

这是 Jsfiddle .注意Jsfiddle不允许使用元标记

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

Tks

解决方案

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

Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg

This is my svg code

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

And this is my 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)
}

Since the svg was not working in Internet Explorer (IE 11), after reading this article that talks about compatibility issue with Browsers, I added

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

To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.

But still the svg shape is not displaying.

Here is a Jsfiddle . Note Jsfiddle does not allow meta tag

How to make an svg masked image compatible with Internet Explorer ?

Tks

解决方案

IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an HTML <img> element e.g.

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

这篇关于如何使SVG遮罩的图像与Internet Explorer兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！