Html ie11中的SVG问题

我有一个div，它的高度设置为320像素，然后它的子对象设置为它的100%宽度。 它的子文件是一个SVG文件，我将其宽度设置为容器的200%。 在运行良好的chrome和firefox中，我得到了这样一幅漂亮的图像：

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

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>

正如我所说，这在Chrome、Firefox和IE Edge中都能很好地工作。但在IE11中，我发现：

如果我检查元素，我可以看到SVG看起来像是有左右填充，但我可以保证它没有

有人知道为什么会发生这种情况，以及我如何解决它吗

更新1

我已经在codepen上创建了一个非常简单的版本，因此您可以看到这个问题。 这是：

---

在chrome、firefox、Edge和IE11中查看。您将看到只有IE11有这个问题。

您可以做的是将

height=“320”

属性添加到SVG标记中。因此IE可以正确渲染。我相信IE11是通过在CSS中使用200%的宽度而被抛弃的。但是由于默认设置为

xml:space=“preserve”

，因此仅设置高度将保持SVG夹克的比例

IE11中的测试代码笔示例：

---

还可以删除XML名称空间标记，因为HTML页面中不需要它。您还可以删除一些SVG属性，如

version

，

xmlns

，

xmlns:xlink

，

x

，和

y

，因为这些属性也不需要。

我在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 120”，但在IE11中，它只显示width=“120”height=“120”

产出为：

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

---

为什么您的SVG设置为200%的宽度？因为它有一个正面和一个背面，我只想看到正面。我们需要看看您的图像是如何包含在SVG标签中的。因此，我们可以在上下文中查看您的代码。还有一个代码示例会更好，这样我们就可以在像codepen或JSFIDLE这样的实时可编辑环境中测试代码。我们需要更多关于您的图像的上下文，以便我们可以帮助您！我将尝试这样做，可能需要一段时间来去除不必要的东西。我添加了一个代码笔来说明我的问题。我只想对此添加一条评论：如果应用高度，IE11将修复问题，默认情况下IE11假设所有SVG都是150px高，除非另有规定。不过，还有另一种解决方案，您可以将SVG的宽度设置为100%，它将调整大小，尽管这实际上并不能解决我的问题。最后，我没有使用高度或宽度。我创建了一个读取viewBox属性的指令，并通过容器宽度与viewBox宽度的差值计算出高度/宽度。IE11将SVG设置为150px高度是没有明显原因的。

150px

是IE11中

元素的默认值，如果未设置

高度

。。因此，您需要在CSS中或通过

height

属性内联设置特定的高度

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