Internet Explorer 11 svg images appears all black

I´m having some troubles with IE11, some svg’s appear all black, while others don´t. The main difference is that the one that don´t appear have id’s and are more complex. The simple one only have one class. They were made in illustrator, and they load well without the svg injector. Here goes a bit of the svg code:

svg version=“1.1” id=“formacao_profissional” xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” x=“0px” y=“0px” viewBox=“0 0 360 235” xml:space=“preserve”>

<defs>

    <style>

    .formacao_profissional .st0{fill:#AFD0EF;}
    .formacao_profissional .st1{fill:#FFFFFF;stroke:#009BDE;stroke-width:0.5;stroke-miterlimit:10;}
    .formacao_profissional .st2{fill:#B5D5F1;}
    #arm-down{transition: all .2s ease-in-out;}
    #arm-up{opacity:0; fill:#003349; transition: all .2s ease-in-out;}
    .formacao_profissional .st4{fill:#FFFFFF;}
    .formacao_profissional .st5{fill:#FFFFFF;stroke:#5EC6F2;stroke-width:0.25;stroke-miterlimit:10;}
    .formacao_profissional .st6{fill:#00091A;}
    .formacao_profissional .st7{fill:#003349;}
    .formacao_profissional .st8{fill:#009ADD;}
    .formacao_profissional .st9{fill:#0D6B95;}                                            
    #formacao_profissional:hover #arm-down { opacity:0 }
    #formacao_profissional:hover #arm-up { opacity:1 }            

    </style>

</defs>        

<g class="formacao_profissional">
<rect id="chao" x="-0.004" y="35" class="st2" width="360" height="200"/>

(…)

</svg>

Any ideas?

[protodave]

After some testing I’ve determined that for some reason IE doesn’t evaluate style tags included in dynamically added/inlined SVG files. Surprised I haven’t seen this before!

I’ve come up with a simple workaround that does trigger IE to read and use any and all style tags embedded in the SVG properly.

      var styleTags = svg.querySelectorAll('style');
      forEach.call(styleTags, function (styleTag) {
        styleTag.textContent += '';
      });

This workaround is in the svg-injector.js code and it is now automatically called during the injection process for each SVG.

I’ve also added a test case in /tests/ie-style-tag-eval and checked with IE9/10/11.

@pbsmultimedia: Please try out the new dist/svg-injector.min.js file in the master branch and let me know if this fixes your issue. If so I’ll also do a bit more testing and then tag a new release build.

[kierenj]

For ref, MS’s bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10898469/