调整svg的大小会导致额外的高度

我有一个交互式svg,并试图用 viewbox 和 display: flex :

// HTML
<div className="interactive-svg">
  <svg ref={svgRef} viewBox={`0 0 ${svgWidth} ${svgHeight}`} />
</div>



// CSS-Styles
.interactive-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    user-select: none;
    cursor: cell;
  }
}

但如果我缩小窗口大小,svg似乎会获得不应该存在的高度:

如果我检查元素,我会看到它会自动设置高度和宽度。如果我在检查器中删除它,就会出现预期的效果:

如何在HTML/CSS中指定它以获得所需的效果,这意味着“矩形”-svg保留了 是因为弹性吗?