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

Question

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

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

可以通过指定svg视口的大小来轻松实现。容器，图像变成：

有没有办法让正方形响应容器高度？这是我的代码：

#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>