IE11 中 SVG 周围的空白问题，与 SVG 中的文本相关

Question

我在 Internet Explorer 中遇到大量白色 space 围绕 SVG 的问题。我创建了最简单的示例来重现问题：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
svg {
  border: 1px solid red;
}
</style>
</head>

<body>
<svg width="600" height="600" viewbox="0 0 600 600">
  <rect fill="powderblue" x="0" y="0" width="600" height="600"/>
  <text x="500" y="500">test</text>
</svg>
</body>

</html>

在 IE11 中查看此内容会在 SVG 的右侧和下方产生大量白色space。请注意下面屏幕截图中的滚动条，表示在 IE 中有大量空白 space 而在 Chrome 中则没有。

如果我执行以下任一操作，白色space就会消失：

删除视图框属性
将文本进一步移至右上角
删除文本（不必删除文本标签，只需删除内容）

作为实验，我在 SVG 下方添加了一个段落，以查看白色space 是否会取代该段落。该段落直接出现在 SVG 下方 - 它没有被白色 space.

取代

知道如何解决这个问题，使白色space 不显示吗？

Answer 1

如果问题是 svg 框左侧和顶部周围的空白，请尝试将正文边距设置为 0

body{
    margin: 0;
}

Answer 2

这显然是 IE 中的一个错误。一种简单的解决方法是在 SVG 上设置 overflow: hidden。

svg {
  overflow:hidden;
}

<svg width="600" height="600" viewbox="0 0 600 600">
  <rect fill="powderblue" x="0" y="0" width="600" height="600"/>
  <text x="500" y="500">test</text>
</svg>

IE11 中 SVG 周围的空白问题，与 SVG 中的文本相关

Issues with whitespace around SVG in IE11, related to text in the SVG

html

svg

internet-explorer-11