Question

我的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>

Answer 1

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

Answer 2

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

设置图像样式：{width：100％; height：auto;}

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

让SVG在HTML页面中保持它的纵横比

2 个答案: