设置SVG viewBox导致容器DIV尺寸意外变化的问题求助

我需要让<svg>元素的viewBox尺寸和它所在的<div>容器完全一致，容器采用flex:1填充布局中的可用空间（表现和width/height:100%类似）。尝试用代码将viewBox设为容器的宽高：

svg.setAttribute('viewBox', `0 0 ${div.clientWidth} ${div.clientHeight}`);

但每次设置viewBox后，容器DIV的尺寸都会变大，就算给所有元素设置padding:0、margin:0也无效。窗口resize或点击按钮触发更新时，容器会持续增大，示例代码如下：

示例代码 #

JavaScript #

const setViewBoxToDivDimensions = () => {
  let svg = document.getElementById('mySvg');
  // 将SVG的viewBox设置为容器DIV的尺寸
  svg.setAttribute('viewBox', `0 0 ${container.clientWidth} ${container.clientHeight}`);
  // 显示当前尺寸信息
  getAndDisplayVals();
}

const getAndDisplayVals = () => {
  let container = document.getElementById('container');
  let svg = document.getElementById('mySvg');  
  
  let dimsResult = `容器DIV的尺寸：${container.clientWidth} x ${container.clientHeight}`;
  let vbResult = `SVG的viewBox：${svg.getAttribute('viewBox')}`;  
  document.getElementById('dimsResult').innerHTML = dimsResult;
  document.getElementById('vbResult').innerHTML = vbResult;
}

document.getElementById('setViewBox').addEventListener('click', e => {
  setViewBoxToDivDimensions();
});

window.addEventListener('resize', e => {
  setViewBoxToDivDimensions();
  getAndDisplayVals();
});

getAndDisplayVals();

HTML #

点击按钮或调整窗口大小，会把"container"DIV的尺寸设置给SVG的viewBox，但这会导致DIV不断变大 :/
<p/>
<button id="setViewBox">修改viewBox</button>
<p/>
<div id="vbResult"></div>
<div id="dimsResult"></div>
<div id="container" style="padding:0px; margin:0px">
  <svg id="mySvg" viewBox="0 0 100 100" style="background-color:grey;padding:0px; margin:0px"></svg>
</div>

解决方案 #

问题根源是SVG的默认布局行为：只设置viewBox但未指定width和height时，SVG会基于viewBox的宽高比，以默认最小尺寸（通常为300x150）占据空间，反过来撑大了容器。

只需两步修复：

• 给SVG设置width:100%; height:100%;，让它完全填充容器，避免因viewBox改变自身布局尺寸
• 若不需要保持内容宽高比，添加preserveAspectRatio="none"，让SVG内容完全拉伸匹配容器

修改后的SVG代码：

<svg id="mySvg" viewBox="0 0 100 100" style="background-color:grey;padding:0; margin:0; width:100%; height:100%;" preserveAspectRatio="none"></svg>

这样再运行JS更新viewBox时，容器尺寸就不会被撑大了——viewBox仅控制SVG内部内容的坐标系，不会影响SVG自身的布局尺寸。

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