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

在ie11中发生SVG问题

2 个答案: