CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
Deeps
Deeps

Reputation: 368

Mask is not working in Internet explorer

Hi all I am trying to blur the edges of an image from one side only, using mask property so that background of body tag blend with image for ex. have a look on below image.

enter image description here enter image description here

i've tried link by which it is running perfectly on all the browsers but except IE and opera. although I've seen in many blogs masking property doesn't work properly with IE. Please find my code snippet below

    <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 I can't do this with masking then please suggest me some good solution.

Upvotes: 0

Views: 1330

Answers (2)

Deeps
Deeps

Reputation: 368

i think i got it, how it could be done for IE. here is the 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>

Upvotes: 1

Theo Bearman
Theo Bearman

Reputation: 79

I would suggest editing the photo in Photoshop and using that instead of the masking. That means that the browsers will render the image rather than the CSS. There are many tutorials on the web which will tell you how to edit the photo on Photoshop.

Alternatively, this workaround by Martin Beeby seemed to work. Looks complicated though!

Good luck...

Upvotes: 0

Related Questions