gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:00:32 24 4
gpt4 key购买 nike

svg height not working

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

最佳答案

浏览器运行正常。如果您在 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>

原因如下:

  1. 您尚未指定 SVG 的实际大小。您已经告诉它 100% 是其父级 ( <body> )。
  2. <body>默认情况下,宽度为 100%,高度会折叠到其子级的高度。
  3. 其子级(SVG)的大小无法确定,因此 <body>当浏览器无法确定尺寸时,高度默认为浏览器使用的“固有尺寸”。该高度为 150px。
  4. 因此最终结果是 SVG 的大小为 100% x 150px。

关于SVG 高度百分比在 Linux 浏览器下不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30032238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com