如何防止在 svg.js 中保留纵横比答案

【问题标题】：How to prevent preservation of aspect ratio in svg.js如何防止在 svg.js 中保留纵横比
【发布时间】：2018-03-06 18:03:38
【问题描述】：

我正在尝试使用 svg.js (https://svgjs.dev) 渲染一个矩形，并且在调整父窗口/窗口大小时不保留纵横比。它适用于普通的 svg 元素，但不适用于 svg.js 元素：

https://jsfiddle.net/h8sgown7/3/

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>

  <script type="text/javascript">
        SVG.on(document, 'DOMContentLoaded', function() {
 
    var draw = SVG('drawing')
    var rect = draw.rect(300, 50).move(0, 0).fill('#ff0000');
        draw.viewbox(0, 0, 300, 55);
    draw.attr('preserveAspectRatio', 'none');
    })
  </script>

  <title>SVGTest</title>
  <style>
    .drawing 
    {
      width: 100%;
      height:50px;
    }
  </style>
</head>
<body>
  <div id="drawing"></div>
  <svg width="100%" height="100px" viewbox="0 0 100 100" preserveAspectRatio="none">
    <rect width="100" height="100" style="fill:rgb(0,0,255)" />
  </svg>
</body>

</html>

【问题讨论】：

标签： html svg svg.js

【解决方案1】：

您已在普通 svg 元素中将高度设置为 100px。默认情况下，svg 由 svg.js 设置为 width="100%" height="100%"。

只需更改您的 svg.js 生成的 svg 高度以匹配您的内联 svg。

draw.viewbox(0, 0, 300, 55).height('100px');

https://jsfiddle.net/h8sgown7/7/

【讨论】：