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

Question

我在Internet Explorer中遇到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的右侧和下方产生大量空白。 请注意下面屏幕截图中的滚动条，表示IE中有大量空白空间，但Chrome中没有。

如果我执行以下任何操作，则空格会消失：

删除viewbox属性
将文本进一步移动到右上角
删除文本（不必删除文本标签，只删除内容）

作为一个实验，我在SVG下面添加了一个段落，看看空格是否会取代段落。 该段直接出现在SVG下方 - 它没有被空白所取代。

知道我怎么能解决这个问题，以便不出现空白？

Answer 1

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

 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>

Answer 2

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

body{
    margin: 0;
}

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-07-22 10:11:10

解决方案2
0 2017-07-21 19:59:32

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-07-22 10:11:10

解决方案2 0 2017-07-21 19:59:32

解决方案1
2 已采纳 2017-07-22 10:11:10

解决方案2
0 2017-07-21 19:59:32