使用svg.js生成的SVG出现莫名边距致布局异常如何解决？

1. 消除SVG默认间隙 #

SVG默认是inline-block元素，继承文本的vertical-align: baseline会导致底部出现微小间隙，这就是你遇到的"莫名边距"。给SVG添加CSS：

svg {
  display: block;
  vertical-align: top;
}

2. 精确获取主容器尺寸 #

用getBoundingClientRect()获取容器的实时精确尺寸，避免offsetWidth/offsetHeight可能的误差，且要确保在DOM渲染完成后再执行计算：

const container = document.getElementById('main-container');
const rect = container.getBoundingClientRect();
const containerWidth = rect.width;
const containerHeight = rect.height;

3. 同步设置SVG尺寸与viewBox #

使用svg.js时，仅设置size()不够，必须同步设置viewBox，让SVG的坐标系统和容器完全匹配，这样panzoom等依赖坐标的功能才能正常工作：

const draw = SVG().addTo(container).size(containerWidth, containerHeight);
draw.viewbox(0, 0, containerWidth, containerHeight);
// 示例绘制匹配容器的矩形
draw.rect(containerWidth, containerHeight).fill('red');

4. 锁定全局与容器的溢出规则 #

给页面根元素和主容器设置溢出隐藏，彻底避免滚动条：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
#main-container {
  overflow: hidden;
}

5. 监听窗口resize动态更新 #

窗口缩放时重新计算容器尺寸并更新SVG，保证布局始终适配：

window.addEventListener('resize', () => {
  const newRect = container.getBoundingClientRect();
  const newWidth = newRect.width;
  const newHeight = newRect.height;
  draw.size(newWidth, newHeight);
  draw.viewbox(0, 0, newWidth, newHeight);
});

这样设置后，SVG的绝对像素尺寸会和容器完全贴合，既不会出现滚动条，panzoom功能也能正常运行。

内容的提问来源于stack exchange，提问作者kai-dj