如何解决svg.js元素缩放时无法禁用宽高比保留的问题？

我帮你排查了这个问题，核心原因是svg.js创建的SVG容器默认保留了宽高比缩放规则，而你需要手动覆盖这个默认行为，就像你在原生SVG里做的那样。

问题根源 #

原生SVG中你通过设置preserveAspectRatio="none"让内容拉伸填充容器，同时用width="100%" height="100%"让SVG占满父容器。但svg.js创建的SVG实例默认使用preserveAspectRatio="xMidYMid meet"（保持宽高比居中显示），而且如果用固定像素值设置尺寸，容器不会跟随父容器缩放。

解决方案 #

只需要两步就能解决：

• 给svg.js创建的SVG容器设置百分比尺寸，让它占满父容器；
• 显式设置preserveAspectRatio="none"属性，取消宽高比约束。

完整代码示例 #

<div id="container" style="width: 100vw; height: 100vh; margin: 0;"></div>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
<script>
  // 获取父容器
  const container = document.getElementById('container');
  
  // 创建SVG容器并配置自适应属性
  const draw = SVG().addTo(container)
    .size('100%', '100%') // 占满父容器的宽高
    .attr('preserveAspectRatio', 'none'); // 取消宽高比保留
  
  // 创建矩形（用百分比尺寸让它随容器拉伸）
  draw.rect('100%', '100%').fill('#ff0000');
</script>

额外说明 #

• 如果你的矩形不需要占满整个容器，也可以用固定像素值，但要确保SVG容器的尺寸是百分比且preserveAspectRatio设为none，这样矩形会跟随容器的拉伸比例变形；
• 父容器必须有明确的尺寸（比如100vw/100vh或者其他布局规则），否则SVG容器无法正确获取可拉伸的空间。

这样调整后，svg.js创建的元素就会和原生SVG一样，在容器/窗口大小变化时自由拉伸，不再保留原始宽高比。

内容的提问来源于stack exchange，提问作者joekr