SVG 高度百分比在 Linux 浏览器下不起作用？

Question

完全相同的代码在 Windows 和 Chrome、FF 和 IE 下工作。我刚切换到 Linux，这段代码在 FF 或 Chrome 上都不起作用？我尝试了 "style" 标签，结果没有变化。有人可以帮忙吗？是否有一种独立于浏览器的方式来实现 100% svg 覆盖率？

<!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>

Answer 1

浏览器运行正常。如果您在 Windows Chrome 上尝试 HTML，您会得到相同的结果。

<!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>

原因如下：

您尚未指定 SVG 的实际大小。你已经告诉它 100% 是它的父级 (<body>)。
默认情况下 <body> 的宽度为 100%，其高度折叠为其子项的高度。
其子项（SVG）的大小无法确定，因此 <body> 高度默认为无法确定大小时浏览器使用的 "intrinsic size"。那个高度是150px.
所以最终结果是 SVG 的大小为 100% x 150px。

SVG 高度百分比在 Linux 浏览器下不起作用？

SVG height percentage not working under Linux browsers?

svg

snap.svg