gpt4 book ai didi

html - 让 SVG 在 HTML 页面中保持纵横比

转载 作者:太空狗 更新时间:2023-10-29 13:52:16 25 4
gpt4 key购买 nike

我有如下所示的 HTML。我用 100x100 的 View 框创建了一个 SVG。呈现时(在 Chrome 中)svg 将自身呈现为 200px 宽(好)但约 500px 高并且文本被推离页面底部。让我的窗口变大或变小没有任何影响 - SVG 只会相应地增加或缩小高度。

为什么 svg 的高度不受任何限制?有没有办法让它自动保持 1:1 的纵横比? SVG 的内容 inside 很好 - 它可以适当缩放。这引起了一些严重的头痛

<html>
<head>
<title>SVG Ahoy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet" version="1.1"></svg>
<div>content below</div>
</div>
</body>
</html>

最佳答案

您在此处设置了 prserveApsectRatio,但我没有在您的 div 上看到高度。这会导致问题吗?此外,如果您查看 svg 文档,svg 项目默认为 100% 宽度和高度。尝试将其高度和宽度明确设置为像素值,看看是否有帮助。

关于html - 让 SVG 在 HTML 页面中保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12645080/

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