Mask 在 Internet Explorer 中不起作用

Question

大家好我正在尝试仅从一侧模糊图像的边缘，使用蒙版属性以便 body 标签的背景与图像混合。看看下面的图片。

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

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

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

祝你好运...

Answer 2

我想我明白了，如何为 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>

Mask 在 Internet Explorer 中不起作用

Mask is not working in Internet explorer

html

css

jquery

internet-explorer