So, I just found out that SVG elements are displayed inline by default. This has the “strange” effect that you get an overflow (which is not apparent, e.g., from the output of the Chrome debugging view) when you try to fill a parent element with a SVG. The following code shows how a scroll bar shows up for “no reason”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <style> html, body, div { margin: 0; padding: 0; width: 100%; height: 100%; } #container { background-color: red; } </style> <title>An SVG is an inline element!</title> </head> <body> <div id="container"></div> <script> var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "100%"); svg.setAttribute("height", "100%"); document.getElementById("container").appendChild(svg); </script> </body> </html> |
To solve this issue all you have to do is to change the display attribute of the SVG, e.g., to block :
|
1 2 3 |
svg { display: block; } |
Try it yourself here: https://jsfiddle.net/mgbckr/ebvso38v/
The reason for this is nicely explained in a StackOverflow post like this:
inlineorinline-blockelements are called “inline” because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the “descent”, which is the area underneath a line of text where the dangly parts of lowercase g’s, j’s, and y’s go.