在ie11中发生SVG问题

Question

我有一个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

在chrome,firefox,Edge和IE11中查看.你会看到只有IE11才有问题.

Answer 1

您可以做的是将height="320"属性添加到SVG标记.因此IE可以正确呈现.我相信在CSS中使用宽度为200%的IE11会被抛弃.但由于xml:space="preserve"是默认设置,仅设置高度将保持SVG夹克的比例.

测试IE11中的codepen示例:

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

还要删除XML命名空间标记,因为HTML页面中不需要它.你也可以去除一些SVG的属性,如version,xmlns,xmlns:xlink,x,和y,因为那些不需要为好.