SVG issues in ie11

Question

I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that. The child of that is a SVG file which I set the width to 200% of the container. In chrome and firefox that works fine, I get a nice image like this:

The HTML looks like this:

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

and the CSS/SASS looks like this:

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:

And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.

Does anyone know why this is happening and how I can fix it?

Update 1

I have created a very simple version on codepen so you can see the issue. Here it is:

http://codepen.io/r3plica/pen/Kdypwe

View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.

Answer 1

What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.

Test codepen example in IE11:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.