我有下面的
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％宽度和高度.尝试将其高度和宽度明确设置为像素值,看看是否有帮助.
