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

【问题标题】：SVG height percentage not working under Linux browsers?SVG 高度百分比在 Linux 浏览器下不起作用？
【发布时间】：2015-05-04 22:34:08
【问题描述】：

完全相同的代码可以在 Windows 下使用 Chrome、FF 和 IE。我刚切换到 Linux，这段代码在 FF 或 Chrome 上都不起作用？我尝试了“样式”标签，结果没有变化。有人可以帮忙吗？是否有独立于浏览器的方式来实现 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>

【问题讨论】：

代码？小提琴？有什么？
抱歉，忘记添加代码了。

标签： svg snap.svg

【解决方案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> 高度默认为浏览器在无法确定大小时使用的“固有大小”。该高度为 150 像素。
所以最终结果是 SVG 的大小为 100% x 150 像素。

【讨论】：

感谢您的回答！它提醒我在 Windows 上测试时没有完整的 HTML 文档。当我删除标记时，SVG 元素仍按原样显示。不知何故，浏览器会自行添加标签。但是如果我删除标记，那么 SVG 元素会按我的预期显示。有没有更好的答案，因为没有 SVG 元素是否在 body 标签内并不重要，它会填满整个窗口。
没有 DOCTYPE，浏览器使用“怪癖”渲染模式。在怪癖模式中，不同之处之一是如何计算百分比高度。见：quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk