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 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" 高度="120".

输出为：

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

IE11 中的 SVG 问题

SVG issues in ie11

html

css

svg

internet-explorer-11