如何设置SVG自适应屏幕宽度，避免缩小时宽度固定、溢出容器

问题根因与解决方案 #

1. 修正viewBox属性拼写错误 #

SVG的viewBox是驼峰命名属性，你代码里写的小写viewbox浏览器无法识别，导致SVG无法按照容器宽度自适应缩放，这是固定宽度不响应的核心原因。

2. 调整viewBox数值匹配实际内容尺寸 #

你当前设置的viewBox="0 0 260 245"远小于SVG内部元素的实际大小，内部路径、图形的实际宽度超过1000，所以会出现溢出容器的问题，需要将viewBox的宽高调整为可以覆盖所有内部元素的数值，示例调整为viewBox="0 0 1100 300"（可根据实际展示效果微调数值）。

3. 可选：添加缩放控制属性 #

给SVG标签添加preserveAspectRatio="xMidYMid meet"属性，可以保证内容等比缩放时始终完整显示在容器内、居中对齐。 #

修正后完整代码 #

svg {
  width      : 100%;
  height     : auto;
  background : yellow;
  /* 防止内容溢出 */
  overflow: hidden;
}
/* 注意：g元素不支持background属性，以下代码无效可删除 */
/* svg g {
  background : green; 
} */
.home-wrapper { 
  background : red; 
  width: 100%;
}

.cls-1 {
 fill         : none;
 stroke       :#0d1738;
 stroke-width : 3px;
}
.cls-2 {
 fill : #0d1738bb;
}
.cls-4 {
 fill : #3d4df3;
}
.cls-3 {
  font-size   : 38px;
  font-family : TitilliumWeb-SemiBoldTitillium Web;
  font-weight : 600;
  }
.cls-4 {
  font-size   : 20px;
  font-family : TitilliumWeb-Regular,Titillium Web;
  }

<div class="home-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 300" preserveAspectRatio="xMidYMid meet">
    <defs></defs>
    <g id="Grupo_209" stroke-width="100%" data-name="Grupo 209" transform="translate(-78 -2163.155)">
      <path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
      <path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
      <path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
      <g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
        <path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
        <g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
          <text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
          <text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
        </g>
      </g>
      <g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
        <path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
        <g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
          <text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
          <text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
        </g>
      </g>
      <g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
        <path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
        <g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
          <text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
          <text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
        </g>
      </g>
      <path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
      <path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
      <path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
    </g>
  </svg>
</div>

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