jquery - Mask 在 Internet Explorer 中不起作用

Question

大家好，我正在尝试仅从一侧模糊图像的边缘，使用 mask 属性，以便 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>

如果我不能用 mask 来做到这一点，那么请给我一些好的解决方案。

Answer 1

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