如何实现SVG元素响应父容器？正方形SVG适配div技术问询

嘿，这个需求我刚好折腾过，其实不用给SVG写死视口尺寸，靠CSS配合SVG的核心属性就能轻松搞定，逻辑超清晰！

关键就在于SVG的viewBox属性和CSS的尺寸控制：

• viewBox给SVG定义一个1:1的坐标系统（比如0 0 100 100，数值只要等比例就行，200x200也完全没问题），它会让SVG始终保持这个比例缩放，不管外部容器多大。
• 父容器（红色框）负责控制整体尺寸，SVG只需要占满父容器的可用空间，再靠preserveAspectRatio（默认值就是我们需要的）自动适配，保持正方形比例。

HTML结构 #

<!-- 红色边框的父容器 -->
<div class="svg-wrapper">
  <!-- 没有设置width/height属性的SVG，靠viewBox定义比例 -->
  <svg viewBox="0 0 100 100">
    <!-- 这里放你的SVG内容，示例是一个绿色正方形 -->
    <rect width="100" height="100" fill="#4CAF50" />
  </svg>
</div>

CSS样式 #

.svg-wrapper {
  /* 这里可以设置父容器的任意尺寸，测试时可以随便改宽高看效果 */
  width: 350px;
  height: 250px; /* 宽>高时，SVG会按高度适配 */
  /* width: 250px;
  height: 350px; */ /* 高>宽时，SVG会按宽度适配 */
  
  border: 2px solid #f44336; /* 红色边框标记父容器 */
  display: inline-block; /* 让容器按自身尺寸显示，也可以用block */
}

.svg-wrapper svg {
  width: 100%;
  height: 100%;
  /* 显式写出preserveAspectRatio，让逻辑更清晰（默认就是这个值，不写也生效） */
  preserveAspectRatio: xMidYMid meet;
}

• 当父容器宽度 > 高度：SVG会自动缩放到和父容器高度一致，宽度按1:1比例缩小，居中显示（绿色正方形占满父容器高度，左右留空）。
• 当父容器高度 > 宽度：SVG会自动缩放到和父容器宽度一致，高度按1:1比例缩小，居中显示（绿色正方形占满父容器宽度，上下留空）。

如果不需要居中对齐，可以修改preserveAspectRatio的值：

• 左上角对齐：preserveAspectRatio: xMinYMin meet
• 右下角对齐：preserveAspectRatio: xMaxYMax meet
  完全可以根据自己的布局需求调整。

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