8

我有下面这样的 HTML。我创建了一个具有 100x100 视图框的 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>
4

2 回答 2

2

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

于 2012-09-28T18:06:30.903 回答
0

将 svg 放入<img>标签中：<img src="path_to_svg" />

图片样式：{width: 100%; 高度：自动；}

将高度设置为自动是秘密。像这样，即使是 preserveAspectRatio 属性也是可选的。（将其放入表格布局会破坏 Internet Explorer 的兼容性）。

于 2015-03-22T20:51:23.120 回答