Вопросы SVG в ie11

У меня есть div, который имеет высоту, равную 320 пикселям, тогда у этого ребенка установлен уровень 100%. Ребенок этого файла SVG, который я установил шириной до 200% контейнера. В chrome и firefox, который отлично работает, я получаю приятное изображение:

HTML выглядит так:

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

и CSS/SASS выглядит так:

.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;
            }
        }
    }
}

Как я уже сказал, это отлично работает как в Chrome, Firefox, так и в IE Edge. Но в IE11 я получаю следующее:

И если я проведу проверку элемента, я вижу, что SVG выглядит так, как будто у него есть отступы слева и справа, но я могу заверить вас, что это не так.

Кто-нибудь знает, почему это происходит и как я могу это исправить?

Обновление 1

Я создал очень простую версию для codepen, чтобы вы могли увидеть эту проблему. Вот он:

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

Посмотрите, что в хром, firefox, Edge, а затем IE11. Вы увидите, что проблема только в IE11.