Menu
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:
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?
758
SVG does not render in IE11 when used in Lightning components. This is working as designed, and looks to be a limitation of Internet Explorer (IE). More specifically, it is due to using svg.
The real reason for all your extra whitespace is simple. In your SVG you have specified a viewBox of "0 0 600 400" (a 600x400 area with origin at 0,0), but your drawing only occupies a much smaller region in the middle of that. If you fix the viewBox, the graphic will conform to the size you give to the SVG.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
