SVG height percentage not working under Linux brow

2019-07-21 22:59发布

站内问答 / 移动开发
1381 1 4

svg height not working

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>

标签： svg snap.svg
举报
1条回答
傲
2楼-- · 2019-07-21 23:03

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:

  1. You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
  2. The <body> by default has width 100% and its height collapses to the height of its children.
  3. 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.
  4. So the end result is that the SVG has a size of 100% by 150px.
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)