SVG高度百分比在Linux浏览器中不起作用？
在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>
浏览器运行正常。如果您在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指定实际大小。您已经告知它是其父项（
<body>）的100％。 - 在
<body>默认情况下有宽度100％，其高度折叠其子项的高度。 - 它的子项（SVG）的大小是不确定的，因此
<body>当其无法确定大小时，高度默认为浏览器使用的“内部大小”。高度为150像素。 - 因此，最终结果是SVG的大小为100％x 150px。