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

发布时间：2020-12-14 16:41:30 所属栏目：资源来源：网络整理

导读：我有下面的 HTML.我创建了一个视图框为100×100的SVG.渲染时(在Chrome中)svg渲染为200px宽(好)但高约500px,文本被推离页面底部.使我的窗口更大或更小没有影响 – SVG相应地增加或缩小高度. 为什么svg不以任何方式限制高度？有没有办法让它自动保持1：1的宽高

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!