我有下面的
HTML.我创建了一个视图框为100×100的SVG.渲染时(在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％宽度和高度.尝试将其高度和宽度明确设置为像素值,看看是否有帮助.
