SVG height percentage not working under Linux browsers?

问题

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:

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:

You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
The <body> by default has width 100% and its height collapses to the height of its children.
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.
So the end result is that the SVG has a size of 100% by 150px.

来源：https://stackoverflow.com/questions/30032238/svg-height-percentage-not-working-under-linux-browsers

标签

svg

snap.svg