Search code examples
csssvginternet-explorer-10

width/height of SVG image messed up by IE10


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!


Solution

  • 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