ie11 html调试,html – ie11中的SVG问题

我有一个div的高度设置为320像素,那么它的小孩被设置为100％的宽度.

这个小孩就是一个SVG文件,我把宽度设置为容器的200％.

在chrome和firefox工作正常,我得到一个很好的形象像这样：

HTML看起来像这样：

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上创建了一个非常简单的版本,所以你可以看到这个问题.

这里是：

查看在chrome,firefox,Edge然后IE11.你会看到只有IE11有问题.