面具不能在Internet Explorer中工作

大家好，我试图从一侧模糊图像的边缘，使用蒙版属性，以便身体标记的背景与图像融为一体。看看下面的图片。面具不能在Internet Explorer中工作

enter image description here

我已经试过link指其上所有的浏览器，但除了IE和Opera完美地运行。尽管我已经在很多博客中看到屏蔽财产与IE无法正常工作。请在下面找到我的代码片段

<svg width="503" height="373"> 
    <defs> 
     <filter id="filter"> 
      <feGaussianBlur stdDeviation="10" /> 
     </filter> 
     <mask id="mask"> 
      <rect y="0" height="400" width="300" fill="white" filter="url(#filter)" ></rect> 
     </mask> 
    </defs> 
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="503" height="373" mask="url(#mask)"></image> 
    <foreignObject width="503px" height="373px" style="mask: url(#mask);"></foreignObject> 
</svg>

如果我无法做到这一点与掩蔽，那么请建议我一些很好的解决方案。

来源

2015-04-06 Deeps

我想我明白了，IE浏览器如何做。这里是Fiddle

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"> 
 
     <defs> 
 
     <linearGradient id="gradient1" spreadMethod="pad" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
      <stop stop-color="#ffffff" stop-opacity="1" offset="70%" /> 
 
      <stop stop-color="#000000" stop-opacity="1" offset="100%" /> 
 
     </linearGradient> 
 
     <mask id="mask4" x="0" y="0" width="300" height="200"> 
 
      <rect style="fill: url(#gradient1); stroke: none;" x="0" y="0" width="200" height="200" /> 
 
     </mask> 
 
     </defs> 
 
     <image mask="url(&quot;#mask4&quot;)" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" /> 
 
    </svg>

来源

2015-04-07 08:13:52 Deeps

我会建议在Photoshop中编辑照片并使用它来代替遮罩。这意味着浏览器将呈现图像而不是CSS。网上有很多教程会告诉你如何在Photoshop上编辑照片。

此外，此解决方案Martin Beeby似乎工作。虽然看起来很复杂！

祝你好运...

来源

2015-04-06 13:00:23

这不会是一个很好的解决方案，如果有使用多个图像或者图像动态加载。我认为OP正在寻找更通用的解决方案。 – 2015-04-06 13:02:04

@ SamyS.Rathore IE看起来并不支持IE，所以如果OP希望它能在IE上工作，这是唯一的解决方案。 – 2015-04-06 13:04:16

有几个选项可以在IE中工作（[例如]（http://jsfiddle.net/w4usc5bs/1/）），这可能会改变和使用不同的方式 – 2015-04-06 13:10:06

面具不能在Internet Explorer中工作

回答

相关问题