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

IE11 embedded styles bug #17

Closed
Kosmonaft opened this issue Dec 9, 2016 · 5 comments

Comments

@Kosmonaft
Copy link

commented Dec 9, 2016

Hey,

In IE11 if the styles of the svg are embedded into the svg file, it's not adding applying them into the svg.
This definitely is not a problem of the plugin but it's going to be amazing if you can add a fix for it.

So for example the icon
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 50"><defs><style>.cls-1-big{fill:#d4edff;}.cls-2-big,.cls-3-big{fill:#0073cf;}.cls-3-big{opacity:0.5;}.cls-4-big{fill:none;stroke:#0073cf;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>Registration_3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Help"><g id="Form"><rect class="cls-1-big" x="1.5" y="1.5" width="42" height="47" rx="8.5" ry="8.5"/><path class="cls-2-big" d="M35,3a7,7,0,0,1,7,7V40a7,7,0,0,1-7,7H10a7,7,0,0,1-7-7V10a7,7,0,0,1,7-7H35m0-3H10A10,10,0,0,0,0,10V40A10,10,0,0,0,10,50H35A10,10,0,0,0,45,40V10A10,10,0,0,0,35,0Z"/><rect class="cls-3-big" x="9" y="11" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="15" x2="35" y2="15"/><rect class="cls-3-big" x="9" y="21" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="25" x2="35" y2="25"/><rect class="cls-3-big" x="9" y="31" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="35" x2="35" y2="35"/></g></g></g></g></svg>

it's looking like this in IE 11

image

I think the fix for it can be the following code:

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

Regards

@arkon

This comment has been minimized.

Copy link
Owner

commented Dec 9, 2016

I'm assuming it looks like that in every browser and not just IE11?

@arkon arkon added the enhancement label Dec 10, 2016
@arkon arkon changed the title IE11 embeded styles Feature to remove all styles Dec 10, 2016
@Kosmonaft

This comment has been minimized.

Copy link
Author

commented Dec 11, 2016

In Chrome, Firefox and Safari it's looking good

@arkon

This comment has been minimized.

Copy link
Owner

commented Dec 12, 2016

I see this was an issue here too: iconic/SVGInjector#23

I'll add the option.

@arkon

This comment has been minimized.

Copy link
Owner

commented Dec 12, 2016

Added a forceEvalStyles option in v1.4.0.

@arkon arkon closed this Dec 12, 2016
@arkon arkon changed the title Feature to remove all styles IE11 embedded styles bug Dec 12, 2016
@arkon

This comment has been minimized.

Copy link
Owner

commented Dec 12, 2016

(I read the original post incorrectly...)

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