Hello everyone, I'm attempting to blur the edges of an image from one side only using the mask property so that the background of the body tag blends with the image. Take a look at the example image below.
I've tried implementing it as demonstrated in this link, and it works perfectly on all browsers except for IE and Opera. It seems like many blogs mention that the masking property doesn't work well with IE. Below is the snippet of my code:
<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>
If masking isn't the best solution for achieving this effect, please suggest alternative solutions. Thank you.