如何调整SVG尺寸使其完全填满外层父div容器

第一步：修改SVG标签属性 #

删除SVG上硬编码的width、height固定属性，新增viewBox属性定义SVG内容的实际绘制范围，可根据需求配置preserveAspectRatio控制缩放行为：

<svg class="svg" viewBox="0 0 你的SVG内容实际宽度 你的SVG内容实际高度" preserveAspectRatio="xMidYMid meet">
  <g class="chart" transform="translate(0,0)">
    <g class="state-g"> (Map here) </g>
  </g>
</svg>

参数说明：

• viewBox四个参数依次为：内容区域左上角x坐标、左上角y坐标、内容总宽度、内容总高度，需要替换为你地图内容的真实尺寸，可以通过浏览器开发者工具审查.chart元素的BBox属性获取准确值。
• preserveAspectRatio可选配置：
  • 填xMidYMid meet：保持内容原有宽高比，完整展示在容器内，会自动留空白
  • 填none：不保持宽高比，强制拉伸内容完全填满容器，可能出现变形
  • 填xMidYMid slice：保持宽高比，裁剪超出容器的内容，确保填满容器无空白

第二步：调整CSS样式 #

给外层容器设置明确高度，同时给SVG设置宽高100%继承父容器尺寸：

.container {
  position: relative;
  align-content: center;
  padding-left: 10%;
  padding-right: 10%;
  /* 按需求设置容器高度，固定高度可写具体像素值，占满视口可写100vh */
  height: 500px;
}

.svg {
  outline: 5px dotted blue;
  font: inherit;
  display: block;
  margin: auto;
  /* 宽高设为100%占满父容器 */
  width: 100%;
  height: 100%;
}

如果调整后内部绿色的.chart区域仍未填满，检查viewBox的尺寸是否刚好包裹所有地图内容，以及.chart的transform偏移值是否正确即可。

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