在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 ，因为这些属性也不需要。

Answer 2

我在IE11中遇到了SVG图像显示问题。 问题是内部svg图像有宽度和高度提到。 由于这一点，它无法在IE11上正确扩展，它在IE边缘，chrome，firefox工作得很好。

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

为了解决这个问题，我删除了width =“120”height =“120”并且工作正常。 当我观察到svg图像具有width =“120”height =“120”viewBox =“0 0 120 120”但是在IE11中它仅显示width =“120”height =“120” 。

输出是：

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">