CODEWITHSUNDEEP
htmlsvginternet-explorer-11
William
William

Reputation: 191

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. 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. Screenshot with Chrome on the left and IE on the right

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?

Upvotes: 6

Views: 1734

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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>

Upvotes: 3

Carla
Carla

Reputation: 56

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;
}

Upvotes: 0

Related Questions