掩码在Internet Explorer中不起作用

Question

大家好我只是试图从一侧模糊图像的边缘，使用蒙版属性，以便身体标签的背景与图像混合为ex。看看下面的图片。

我已经尝试了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>

如果我不能用掩蔽做到这一点那么请建议我一些好的解决方案。

Answer 1

我想我明白了，如何为IE做到这一点。这是Fiddle

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

或者，Martin Beeby的这种解决方法似乎有效。虽然看起来很复杂！

祝你好运......