Internet Explorer Not Recognizing CSS for Svg Elements

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>

IE 11 not recognizing SVG translate

IE does not support the transform attribute on <svg> elements because that feature is new in SVG 2 and IE really only supports SVG 1.1

You could move the transform to the <g> child of the <svg> element, IE would recognise it there but you'd also need to alter the viewBox now that the transform is only applied to the child of the <svg> element.

<html><head></head><body><svg xmlns="http://www.w3.org/2000/svg" viewBox="4 35 32 75" width="32px" height="75px" version="1.1"> <g fill="none" stroke="none" stroke-width="1"  transform="translate(4, 35)">  <path stroke="#333333" stroke-width="1" transform="translate(0 -3)" d="M 0.5 3.7895 L 0.5 35.5 L 12.8536 35.5 L 16.4461 38.7895 L 20.3642 35.5 L 31.5 35.5 L 31.5 3.7895 L 0.5 3.7895 Z" />   <text id="55" font-family="NotoSans-Bold, Noto Sans" font-size="14" font-weight="bold" fill="#333333">    <tspan x="12" y="21">1</tspan>   </text>   <rect class="slider-handle" style="fill: rgb(23, 119, 207);" x="12" y="44" width="10" height="24" rx="1" />      </g></svg></body></html>

IE not displaying SVG as content in a pseudo element :before or :after

I have tested it with IE 11 and I am able to produce the issue. It seems that the pseudo-elements content attribute do not currently work on SVG elements. It can be possible that it is some kind of bug or it is IE browser default behavior. I will try to submit the feedback regarding this issue.

As a workaround, I suggest you display the svg content using background-image attribute, like this:

<style>
    .div1:after {
        content: '';
        display: block;
        height: 80px;
        width: 80px;
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
    }
</style>
<div class="div1" style="background-color:green; width:80px;height:80px"></div>

The result in IE 11 browser as below:

Sample Image

Edit:

I am not able to use my svg with background-image property whereas
your svg is loading with the property. Is there any problem with my
svg?

When we use SVG with background-image property, we should ensure that reserved URL characters are encoded (e.g. < === %3C and > === %3E) and also replace the space with '%20'.

So, please encode your svg element as below:

background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%22266.53926701570674%20152.66492146596858%2044%2044%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M267.54%20153.66L307.54%20193.66L267.54%20193.66L267.54%20153.66Z%22%20id%3D%22d6AN4MEUYO%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23d6AN4MEUYO%22%20opacity%3D%221%22%20fill%3D%22red%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);

Then, the result like this:

Sample Image

CSS translate not working in IE11 on SVG g

IE11 supports the transform attribute in SVG even though it doesn't recognize the CSS style.

Fortunately, you can simply set the attribute to match the style using JavaScript:

var g = document.querySelector('g'),
    transform = getComputedStyle(g).getPropertyValue('transform');
    
g.setAttribute('transform', transform);
svg {
  width: 20px;
  height: 20px;
}

g {
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
}
<svg viewbox="0 0 20 20">
  <g>
<circle cx=10 cy=10 r=10 />
  </g>
</svg>

SVG not rendering in IE

Navigating directly to the SVG in question works fine.

If you use the F12 Developer Tools to disable CSS on the page, the SVG image renders.

If you remove the width property from #logo-image img, it renders, or you can add a height:35px property instead and the SVG will render.

Perhaps related to this question? SVG in img element proportions not respected in ie9

SVG not rendering IE 11

What I've done to make it work :

In the svg file :

  1. add <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. add <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
  3. remove height & width properties
  4. add xmlns="http://www.w3.org/2000/svg" in the svg markup

In the html file :


  1. use an img element instead of object : <img src="..." style="width:95%;height:60%" />

Why is my SVG appearing in chrome but not IE or FF?

  • IE and Firefox implement the SVG 1.1 definition of rect elements where x, y, width and height are attributes

  • Chrome implements the SVG 2 definition of rect elements where x, y, width and height are mapped CSS properties

  • When you create the x axes you specify the d as an attribute rather than a CSS property so that's why that works

  • SVG 2 is still in draft, UAs are experimenting with implementing different parts of it. There are also some parts that Firefox has implemented that Chrome has not for instance.


Related Topics

<Style> and <Script> Tags Are Displayed Physically on Page

How to Hide or Show Content with CSS Depending on Screen Size

Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here

Bootstrap Modal Restores Button Focus on Close

Is There a Way (Or a Plugin) to Make Vim Generate a Code Outline for CSS

What Does Inherit Mean in CSS

Create Concave Corners in CSS

More Than 12 Cols Per Row in Bootstrap

Remove Glyphicons from Bootstrap

How to Test CSS Properties for a React Component Using React-Testing-Library

Scale Image Until Either X or Y Is The Same as The Container and Then Crop The Rest

How to Reverse-Engineer a Webkit Matrix3D Transform

Inline Svg in React 16

CSS3 Background-Size Cover to Percentage Animation Zoom

CSS3 Gradients and Border-Radius Leading to Extraneous Background in Webkit

How to Stretch a Header Across a Web Page Background with CSS

CSS Width/Height Pixel and Percentage Calculation Combintaion

How to Get Twitter Bootstraps Mobile Navbar to Overlay The Content on The Page Instead of Pushing It Down


Leave a reply



Submit