如何让SVG的viewbox适配容器尺寸？技术咨询

刚好碰到过类似的场景，给你梳理下怎么搞定这个问题：你是想让SVG的内部坐标系统（viewBox）完全贴合wrapper容器的视口尺寸，不管容器宽高比，让图形填满整个区域对吧？

解决方案步骤 #

• 修正viewBox的拼写
  规范里这个属性是驼峰式的viewBox（B大写），虽然部分浏览器兼容小写，但为了兼容性和规范性，先把代码里的viewbox改成viewBox。

• 添加preserveAspectRatio="none"属性
  这是实现需求的关键——默认的preserveAspectRatio值是xMidYMid meet，会强制保持viewBox的原始宽高比；而设置为none后，SVG会完全拉伸内部的坐标系统，让viewBox的宽高100%匹配SVG的视口（也就是wrapper的尺寸），图形会填满整个容器。

• 确保SVG和wrapper的尺寸设置正确
  你已经给SVG设了width="100%" height="100%"，这一步没问题，能让SVG完全占满wrapper；记得给wrapper设置具体的固定高度（比如CSS里height: 300px），这样SVG的height:100%才有明确的参考值。

修改后的完整代码 #

<style>
.wrapper {
  width: 100%;
  height: 300px; /* 这里替换成你需要的固定高度 */
}
</style>

<div class="wrapper"> 
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
  </svg> 
</div>

额外说明 #

• 如果之后你想保持图形的原始比例，但填满容器（裁剪超出部分），可以把preserveAspectRatio改成xMidYMid slice，但这和你当前“100%拉伸匹配”的需求不同，按需选择即可。
• viewBox="0 0 100 100"定义了SVG内部的坐标系统：左上角是(0,0)，右下角是(100,100)，设置preserveAspectRatio="none"后，这个坐标系统会完全映射到wrapper的实际宽高上，比如wrapper宽800px、高300px的话，viewBox里的1单位宽度对应8px，1单位高度对应3px，图形会被拉伸填满整个区域。

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