保持 SVG 纵横比并调整父级大小

Question

我在容器<div>（在容器<div>）中并排放置了三个<svg>s。

每个<svg> 应始终占据其直接父级宽度的三分之一并且的高度等于其宽度。

这意味着随着窗口大小的调整，<svg>s 的宽度会变小或变大，它们的高度也会变小，容器的高度也会变大<div>。

#container { 
    background-color: grey;
}

.svg-wrapper {
   background-color: red;
   display: inline;
}

svg {
  background-color: white;
  width: 33%;
}

<div id="container">
    <div class="svg-wrapper" id="sw1">
        <svg id="svg1"></svg>
    </div>
    <div class="svg-wrapper" id="sw2">
        <svg id="svg2"></svg>
    </div>
    <div class="svg-wrapper" id="sw3">
        <svg id="svg3"></svg>
    </div>
</div>

根据this的回答，我尝试添加.svg-wrapper { padding-bottom: 100% }，但无济于事。

编辑：基本上，应该始终满足两个条件：

1. 三个<svg>s 应该始终是方形的：它们的高度等于它们的宽度
2. 每个<svg> 的宽度应该是其父级宽度的三分之一。

当父级的宽度因页面大小调整而改变时，每个<svg> 的宽度也应更改，使其保持为父级的三分之一。每个<svg> 的高度也应该改变相同的量，所以高度和宽度总是相等的。

投票结束：我的问题真的和this一样。我没有看到 Web_Designer's great answer 中指定将包装器的位置设为相对位置和将 inside-div 的位置设为绝对位置的部分。

Answer 1

请参阅下面的解决方案

#container { 
    background-color: grey;
}
 *{
   box-sizing:border-box;
}
.svg-wrapper {
   background-color: red;
   width: 33.33%;
  float:left;
}

svg {
  background-color: white;
  max-width:100%;
  border:1px solid #000;
}

<div id="container">
    <div class="svg-wrapper" id="sw1">
        <svg id="svg1"></svg>
    </div>
    <div class="svg-wrapper" id="sw2">
        <svg id="svg2"></svg>
    </div>
    <div class="svg-wrapper" id="sw3">
        <svg id="svg3"></svg>
    </div>
</div>