Question

svg height not working

完全相同的代码在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>

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>高度默认为浏览器在无法确定大小时使用的“内在大小”。那个高度是150px。
因此最终结果是SVG的大小为100％乘150px。

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

1 个答案: