logo标签列表

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

htmlsvg
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>
2个回答
2
您在这里设置了preserveAspectRatio，但我没有看到您的div上有高度。这是否会引起问题？此外，如果您查看svg文档，svg项目默认为100％的宽度和高度。尝试将其高度和宽度明确设置为像素值，看看是否有帮助。
这是我所思考的，但我希望该项能够灵活缩放。也就是说，如果窗口被调整大小，我希望svg也能随之缩放。这种情况是否可能？ - dave mankoff
是的！我建议你学习百分比值的工作原理，以及在更复杂的情况下如何使用Javascript或Jquery来提供更精细的物品显示调整。确保弄清楚您想要垂直占用窗口的百分比。在HTML中，高度的%值需要指定其父容器也有一个指定的高度（请记住!!）。这在过去给我带来了无尽的头痛。我建议在HTML中进行一些关于动态高度缩放的研究，或者类似的东西（这更像是教程类型的答案，而不是我们可以在论坛上说的内容）。 - dudewad
是的，这正是我所担心的。我正在使用Backbone进行一些复杂的DOM构建。在最初创建SVG时，它并不知道它的最终宽度。我创建了一个jQuery窗口调整大小回调来强制高度=宽度，但我希望有一个好的非JavaScript解决方案。 - dave mankoff
就理解HTML中对象的高度而言，您需要考虑到整个父级树必须设置高度值（或者至少是顶层父级）。 - dudewad
是的。我希望通过设置视口，SVG 可以知道它应该保持一定的纵横比，就像图像一样。哦，好吧，谢谢你的建议！ - dave mankoff
0
将 SVG 放到 <img> 标签中：<img src="path_to_svg" /> 样式化图片：{width: 100%; height: auto;}
将高度设置为自动是关键。这样，即使 preserveAspectRatio 属性是可选的。（把它放进表格布局中会破坏 Internet Explorer 的兼容性）。
1
将高度设置为自动可以解决问题，但是没有理由将SVG放在图像标签中。将其保留在<svg>中就可以了。 - Brad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接