我有下面的HTML.我创建了一个SVG,其视图框为100x100.渲染时(在Chrome中)svg渲染为200px宽(好)但高约500px,文本被推离页面底部.使我的窗口更大或更小没有影响 - SVG相应地增加或缩小高度.
为什么svg没有以任何方式限制高度？有没有办法让它自动保持1:1的宽高比？SVG 内部的内容很好 - 它可以适当缩放.这引起了一些重大问题
<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% width 和 height。尝试将其高度和宽度明确设置为像素值，看看是否有帮助。