Issues with whitespace around SVG in IE11, related to text in the SVG
Question
I'm having issues with large amounts of whitespace surrounding an SVG in internet explorer. 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. Note the scrollbars in the screenshot below, indicating the large amount of empty space in IE but not in Chrome.
The whitespace disappears if I do any of the following:
- Remove the viewbox attribute
- 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. The paragraph appeared directly below the SVG - it wasn't displaced by the whitespace.
Any idea how I can fix this so that the whitespace doesn't appear?
2 answers
solution1
2 ACCPTED 2017-07-22 10:11:10
It's obviously a bug in IE. One simple workaround is to set overflow: hidden on the 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>
solution2
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
body{
margin: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.