Question

我正在尝试使用svg.js（http://svgjs.com）渲染一个矩形，并且在调整父/窗口大小时不保留纵横比。它适用于普通的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元素中将高度设置为width="100%" height="100%"。默认情况下，svg由svg.js设置为draw.viewbox(0, 0, 300, 55).height('100px');。

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

Schema

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

如何防止在svg.js

1 个答案: