如何让嵌套div中的SVG实现响应式适配并解决水平滚动条问题？

调整后的CSS代码 #

#parent {
  position: relative;
  max-width: 100%;
  overflow: hidden; /* 隐藏超出视口的内容，消除水平滚动条 */
}

#child {
  position: absolute;
  width: 320px;
  height: 130px;
}

调整后的HTML代码 #

<div id="parent">
  <div id="child" style="left: 0px; top: 0px; width: 320px; height: 130px;">
    <svg width="100%" height="100%" viewBox="0 0 320 130" xmlns="http://www.w3.org/2000/svg">
      <rect width="320" height="130" x="0" y="0" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
    </svg>
  </div>
  <svg width="100%" height="auto" viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg">
    <circle cx="350" cy="350" r="300" stroke="green" stroke-width="4" fill="green"></circle>
  </svg>
</div>

核心修改点说明 #

• 给#parent加max-width: 100%和overflow: hidden：把父容器限制在视口宽度内，超出部分直接隐藏，从根源上避免水平滚动条。
• 大SVG设置width: 100%; height: auto：让SVG自动适配父容器宽度，高度按原始比例自动调整，保证缩小时不变形。
• 为两个SVG添加viewBox属性：viewBox是SVG缩放的关键，设置为原始尺寸的0 0 原宽 原高，能让SVG始终保持自身比例，无论容器大小怎么变都不会拉伸扭曲。
• 保留#child的绝对定位：绝对定位元素不占文档流空间，不会影响父容器的宽度计算，完全不耽误后续用jQuery做拖拽缩放。

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