1

I have an SVG image with clickable SVG polygons on it and some hover image effects on top of that. works perfectly fine in every browser, except - of course - in IE. actually edge (12 + 13) and IE 11 are fine. Even IE10 (Metro) - but not IE10 Latest (as tested in Browserstack).

Since this has to be seen with the images I put up a working example here (well working apart from IE10): SVG clickable images

so following that link you can see what it should look like (again, except IE10) and this is a screenshot from Browserstack of what it looks like in IE10 Latest:

enter image description here

So in this specific case, the black & white-image (background) - instead of having a 7.5% margin-left and 85% width like the rest of the svg stuff - is resized by the height, which seems to be 100%, thus resulting in incorrect layering of the SVGs.

i really don't know what's causing this - any help is much appreciated!

Melvin
  • 329
  • 4
  • 20

1 Answers1

2

It looks like you are only supplying a width for the <svg> element (ie. no height). So it is probably IEs SVG scaling bug that is your problem. See the following question for a workaround.

SVGs not scaling properly in IE - has extra space

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181