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存在问题。

- r3plica

---

你的SVG为什么设置为200%的宽度？ - Paul LeBeau

因为它有前面和后面，我只想看到前面。 - r3plica

我会尝试做这个，可能需要一段时间来剥离不必要的东西。 - r3plica

@JonathanMarzullo 有什么想法吗？ - r3plica

刚刚完成了我的回答，请查看下面。 - Jonathan Marzullo

Answer 1

你可以在SVG标签中添加height="320"属性，这样IE就能正确渲染了。我相信IE11在CSS中使用200％的宽度时会出现问题。但是由于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">

既然在 HTML 页面中没有必要，就可以删除 XML 命名空间标记。而且您还可以删除一些 SVG 属性，如 version、xmlns、xmlns:xlink、x 和 y，因为它们也不需要。

- Jonathan Marzullo

---

我只想对这个问题添加一条评论： 如果你设置一个高度，IE11将解决此问题，默认情况下，IE11假定所有SVG都是150像素高，除非另有规定。但还有另一种解决方案，你可以将SVG的宽度设置为100％，它会自动调整大小，不过这并没有真正解决我的问题。最终，我没有使用高度或宽度。我创建了一个指令，读取viewBox属性，并通过容器宽度与viewBox宽度之间的差异来计算高度/宽度。 - r3plica

IE11 无缘无故将我的 SVG 高度设为 150 像素。 - Nick Grealy

如果未设置 height 属性，那么在IE11中 <svg> 元素的默认高度为 150px。因此您需要在CSS或通过 height 属性内联设置特定的高度。 - Jonathan Marzullo

Answer 2

我在IE11中遇到了SVG图像显示问题。问题是内部SVG图像的宽度和高度已经指定。因此，在IE11上无法正确缩放，但在IE Edge、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">

- Sandeep M