Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internet Explorer 11 svg images appears all black #23

Closed
pbsmultimedia opened this issue Jan 16, 2015 · 8 comments

Comments

@pbsmultimedia
Copy link

commented Jan 16, 2015

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"/>

(...)

Any ideas?

@protodave

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2015

My initial thought is that the CSS rules included in your SVGs are colliding with each other. This happens because when you inline your SVG markup directly on the page (manually or using a helper like SVGInjector) any style rules are now in the scope of the main page's primary parse tree and no longer isolated to only that single SVG (unlike when you use an SVG as the src of an img tag). This means all styles in each SVG now effect all SVGs (and anything else on your page that matches your selectors too).

Reference:

6.15 The scope/range of styles - http://www.w3.org/TR/SVG/styling.html#Scope

You can test that out by adding a rule like body { background-color: plum; } to any of your SVGs and notice that doesn't effect the page when using SVG via an img tag, but does effect the page when you put the full SVG markup inline on your page (manually or via SVGInjector).

So, I'd start by looking at the styles included in the SVGs and see if they are stepping on each other, and possibly look at consolidating and extracting those styles into your main page's CSS (think of them as a theme, or a set of styles, to be applied across all your page SVGs). Alternatively you can make the selectors in each SVG more specific, like giving each SVG a unique id and crafting your CSS selectors for each SVG to match only itself. (That gets a little tricky though if you want to use an SVG multiple times on a page, like with icons, and style each one differently.)

Not sure why you'd only see this issue in IE11 though. Does this happen in Chrome or FF too?

Let me know if that makes sense and helps. Happy to debug further if you have some example code (using multiple working & non-working SVGs) or a dev site you want me to look at.

@pbsmultimedia

This comment has been minimized.

Copy link
Author

commented Jan 17, 2015

Hi, thanks for the fast reply.
I already tried only inserting one SVG of those of fail, and is still black, and also, i don´t use black anywhere.. so i think that is not style conflict.
It only happens in IE, on FF and Chrome its ok.
I will put it online later for you to have a look.
Thanks once again.

@pbsmultimedia

This comment has been minimized.

Copy link
Author

commented Jan 19, 2015

Here goes the link for you to have a look:
http://companhiapropria.pt/ficheiros/demos/svg/
Thanks

@protodave

This comment has been minimized.

Copy link
Contributor

commented Jan 19, 2015

Ok, great, that's helpful. taking a look...

protodave added a commit that referenced this issue Jan 19, 2015
…ef: issue #23 - Internet Explorer 11 svg images appears all black
@protodave

This comment has been minimized.

Copy link
Contributor

commented Jan 19, 2015

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.

@pbsmultimedia

This comment has been minimized.

Copy link
Author

commented Jan 20, 2015

Yes it works ok now!
Thank you, good work.

@kierenj

This comment has been minimized.

@arcovirtual

This comment has been minimized.

Copy link

commented Nov 16, 2018

I have a problem, my svg logo is all in black on the main page but by taking the full path only the svg is seen correctly, and the css load is external I can not understand why that happens.

look https://mallregional.cl/portal error logo see all black
direct svg look correct https://mallregional.cl/image/catalog/1_SISTEMA/LOGO_SVG_.svg

:(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.