2

svg height not working

The exact same code works under Windows with Chrome, FF and IE. I just switched to Linux and this code doesn't work neither on FF or Chrome? I tried the "style" tag, with no change in results. Can someone help? Is there a browser independent way of having 100% svg coverage?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="jquery-1.11.2.min.js"></script>
<script src="snap.svg-min.js"></script>
<svg id="svgEle" height="100%" width="100%"></svg>
<script>
    var snapCanvas = Snap("#svgEle");
    var circle = snapCanvas.circle(100, 100, 100);

</script>
</body>
</html>

1 Answers1

5

The browser is behaving correctly. If you try the HTML on Windows Chrome you get the same result.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<svg id="svgEle" height="100%" width="100%">
  <circle cx="100" cy="100" r="100"/>
</svg>
</body>
</html>

The reason is as follows:

  1. You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
  2. The <body> by default has width 100% and its height collapses to the height of its children.
  3. The size of its child (the SVG) is not determinable, so the <body> height defaults to the "intrinsic size" used by browsers when it can't determine a size. That height is 150px.
  4. So the end result is that the SVG has a size of 100% by 150px.
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thank you for your answer! It reminded me that I didn't have a full HTML document when testing on Windows. When I remove the tags, the SVG element is still displaying as it is with them. Somehow the browser adds the tags on its own. But if I remove the tag, then the SVG element displays as I expect. Is there a better answer, because without the it doesn't matter that the SVG element is inside the body tags or not and it fills the whole window. –  May 04 '15 at 14:41
  • 1
    Without a DOCTYPE, the browser uses "quirks" rendering mode. In quirks mode, one of the things that is different is how percentage heights are calculated. See: https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk – Paul LeBeau May 05 '15 at 01:11
  • But when I change height '100%' to '500%', result is still the same – Seyit Bilal Dec 16 '22 at 14:26
  • @SeyitBilal 500% of what, though? 500% x is still . So it will again fall back to the default 150px. – Paul LeBeau Dec 18 '22 at 07:29