如何使svg元素响应它的父容器？

Question

我正试图实现这一点：
在div内部渲染svg正方形（w：h = 1：1矩形）， 当div的宽度大于高度时，方形应按高度装入容器（红色框是div，绿色框是svg方形）：

当div的高度大于宽度时，乡绅应按宽度装入容器：

可以通过指定svg视图端口的大小轻松实现。但是如果我删除了svg视图端口的大小，而是当我将大小添加到父div（红色框）时，它拒绝查看容器的高度，图像变为：

有没有办法让广场响应集装箱高度？ 这是我的代码：

#main {
  width: 400px;
  height: 100px;
  border: 4px solid red;
}

<div id="main">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid Meet">
    <rect x="0" y="0" width="100" height="100" fill="green"/>
  </svg>
</div>

Answer 1

只需将SVG的width和height属性设置为"100%"即可。无论是在SVG中，还是通过CSS。

其次，修复您的其他属性：

• viewBox值不应包含逗号。
• 是preserveAspectRatio，不是preserveAspect，meet，不是Meet

#main {
  width: 400px;
  height: 100px;
  border: 4px solid red;
}

<div id="main">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <rect x="0" y="0" width="100" height="100" fill="green"/>
  </svg>
</div>