How to Make an Svg Masked Image Compatible with Internet Explorer

How to make an svg masked image compatible with Internet Explorer

IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an HTML <img> element e.g.

* {  padding: 0;  margin: 0;}html, body {  height: 100%;  width: 100%;}
.photo_rectangle_inverse {  -webkit-clip-path: url(#shape);  clip-path: url(#shape);  position: relative;  -webkit-transform: translateZ(1px)}

    <svg height="100%" width="100%" >      <defs>        <clipPath id="shape">          <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />        </clipPath>      </defs>
      <image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/>      <image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />    </svg>'

css masking in IE10

demo - http://jsfiddle.net/2wtbrsdq/

try using svg

<svg width="360" height="233" version="1.2">  <defs>    <mask id="svgmask2">      <image width="100%" height="100%" xlink:href="http://s12.postimg.org/pzhdxcxb1/squirrel.png" />    </mask>  </defs>  <image mask="url(#svgmask2)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" /></svg>

Internet Explorer not recognizing CSS for SVG elements

_{The answer is...}

For opacity transitions in an SVG, IE needs an opacity greater than zero!

a.hover_area:link, a.hover_area:visited {opacity: 0.001}

Otherwise it just throws it out, like "heyyyyy, won't be needing this invisible thing!" despite having been told to expect a transition: transition-property: opacity;

_{Here's a snippet, working in IE11:}

<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body><div style="width: 480px; height: 640px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
 <filter id="desaturate">  <feColorMatrix    type='matrix'    values="0 1 0 0 0     0 1 0 0 0     0 1 0 0 0     0 1 0 1 0 "  /> </filter>  <style type="text/css">  /* <![CDATA[ */  a.hover_area:link,  a.hover_area:visited {   opacity: 0.001; /* Must be greater than 0 for IE! */  }  a.hover_area:hover,  a.hover_area:active {   opacity: 1;   transition-property: opacity;   transition-duration: 0.4s;   transition-timing-function: ease-in-out;  }    .desaturated {   filter:url("#desaturate");  }  /* ]]> */ </style>
 <defs>  <clipPath id="clip-path">   <polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>  </clipPath>  <clipPath id="clip-path-2">   <polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>  </clipPath>  <clipPath id="clip-path-3">   <polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>  </clipPath>  <clipPath id="clip-path-4">   <polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>  </clipPath>  <clipPath id="clip-path-5">   <polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>  </clipPath>  <clipPath id="clip-path-6">   <polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>  </clipPath>  <clipPath id="clip-path-7">   <polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>  </clipPath>  <clipPath id="clip-path-8">   <polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>  </clipPath>  <clipPath id="clip-path-9">   <polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>  </clipPath>  <clipPath id="clip-path-10">   <polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>  </clipPath>  <clipPath id="clip-path-11">   <polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>  </clipPath>  <clipPath id="clip-path-12">   <polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>  </clipPath>  <image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/> </defs>
 <image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
 <a xlink:href="#" class="hover_area">  <g id="_1-2" data-name="1">   <g clip-path="url(#clip-path)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_2-2" data-name="2">   <g clip-path="url(#clip-path-2)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_3-2" data-name="3">   <g clip-path="url(#clip-path-3)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_4-2" data-name="4">   <g clip-path="url(#clip-path-4)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_5-2" data-name="5">   <g clip-path="url(#clip-path-5)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_6-2" data-name="6">   <g clip-path="url(#clip-path-6)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_7-2" data-name="7">   <g clip-path="url(#clip-path-7)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_8-2" data-name="8">   <g clip-path="url(#clip-path-8)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_9-2" data-name="9">   <g clip-path="url(#clip-path-9)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_10-2" data-name="10">   <g clip-path="url(#clip-path-10)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_11-2" data-name="11">   <g clip-path="url(#clip-path-11)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a> <a xlink:href="#" class="hover_area">  <g id="_12-2" data-name="12">   <g clip-path="url(#clip-path-12)">    <image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>   </g>  </g> </a></svg>
</div></body></html>

IE11 meta element Breaks SVG

It sounds as though you're not in a modern document mode. Internet Explorer 11 shows the SVG just fine when you're in Standards Mode. Make sure that if you have an x-ua-compatible meta tag, you have it set to Edge, rather than an earlier mode.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

You can determine your document mode by opening up your F12 Developer Tools and checking either the document mode dropdown (seen at top-right, currently "Edge") or the emulation tab:

Sample Image

If you do not have an x-ua-compatible meta tag (or header), be sure to use a doctype that will put the document into Standards mode, such as <!DOCTYPE html>.

Sample Image

How to Make an Svg Masked Image Compatible with Internet Explorer