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

Question

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

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

Answer 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/

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

How to prevent preservation of aspect ratio in svg.js

html

svg

svg.js