如何实现SVG内部path响应式，固定SVG高度且path宽度占满

核心属性配置 #

1. 调整SVG标签基础属性：
   保留正确的viewBox属性（值为你SVG设计的原始画布尺寸，格式为0 0 宽度 高度），删除SVG标签上自带的固定width、height属性，新增preserveAspectRatio配置：

<svg 
  viewBox="0 0 1920 800" <!-- 替换为你的SVG实际画布尺寸 -->
  preserveAspectRatio="xMidYMin meet"
  <!-- 其余原有属性（如fill、stroke等）保持不变 -->
>
  <!-- 内部path、shape等内容无需修改 -->
</svg>

2. 增加CSS尺寸约束：
   不要设置固定高度，通过max-height限制最大高度，height: auto保证SVG始终按viewBox比例缩放：

/* 给你的SVG加对应选择器的样式 */
svg {
  width: 100%;
  height: auto;
  max-height: 400px;
  /* 解决SVG遮挡下层元素无法点击的问题：如果SVG无交互需求直接加这行 */
  pointer-events: none;
  /* 如果SVG本身有交互操作，就给下层需要点击的元素加样式：position: relative; z-index: 10; */
}

宽屏适配特殊处理 #

如果宽屏场景下要求SVG宽度必须100%占满，即使按比例计算高度超过400px也不能缩小宽度，可将preserveAspectRatio的值改为xMidYMin slice，此时超出400px高度的SVG内容会从底部裁剪，内部元素比例不会变形，宽度始终占满容器。

问题原因说明 #

之前直接设置固定height: 400px时，SVG默认的preserveAspectRatio配置会优先保证完整展示整个SVG画布，所以会按比例缩小宽度适配400px高度，就出现了内部path尺寸变小、宽度无法占满的问题。

内容的提问来源于stack exchange，提问作者Aseel.kkh