IE11中SVG周围的空白问题，与SVG中的文本有关
[英]Issues with whitespace around SVG in IE11, related to text in the SVG
问题描述
I'm having issues with large amounts of whitespace surrounding an SVG in internet explorer. 
我在Internet Explorer中遇到SVG周围的大量空白问题。 I've created the simplest example I could that reproduces the problem: 我创建了一个可以重现问题的最简单的例子：
<!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>
Viewing this in IE11 produces a large amount whitespace to the right and below the SVG. 在IE11中查看此内容会在SVG的右侧和下方产生大量空白。 Note the scrollbars in the screenshot below, indicating the large amount of empty space in IE but not in Chrome. 请注意下面屏幕截图中的滚动条，表示IE中有大量空白空间，但Chrome中没有。
The whitespace disappears if I do any of the following: 如果我执行以下任何操作，则空格会消失：
- Remove the viewbox attribute 删除viewbox属性
- Move the text further to the top right 将文本进一步移动到右上角
- Delete the text (don't have to delete the text tags, just the content) 删除文本（不必删除文本标签，只删除内容）
As an experiment I added a paragraph below the SVG to see if the whitespace would displace the paragraph. 作为一个实验，我在SVG下面添加了一个段落，看看空格是否会取代段落。 The paragraph appeared directly below the SVG - it wasn't displaced by the whitespace. 该段直接出现在SVG下方 - 它没有被空白所取代。
Any idea how I can fix this so that the whitespace doesn't appear? 知道我怎么能解决这个问题，以便不出现空白？
2 个解决方案
解决方案1
2 已采纳 2017-07-22 10:11:10
It's obviously a bug in IE. 这显然是IE中的一个错误。 One simple workaround is to set overflow: hidden on the SVG. 一个简单的解决方法是设置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>
解决方案2
0 2017-07-21 19:59:32
If the issue is the whitespace around the left and top of the svg box, try setting the body margin to 0 如果问题是svg框左侧和顶部周围的空白，请尝试将主体边距设置为0
body{
margin: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.