D3.js 修复了嵌套svg底部的svg

我将SVG嵌套在此表单中，父SVG可以更改其宽度和高度：

<svg id="parent">
    <svg id="noPreserveRatio"></svg>
    <svg id="fixed"></svg>
</svg>

---

我希望id=“fixed”的SVG相对于父SVG始终具有相同的高度（比如100px）和宽度=100%。我希望id=“nopreservatio”的SVG完全填充父容器。我尝试了使用viewbox和保留纵横比的不同方法，但未能达到预期效果。如果我的嵌套SVG和父SVG具有相同的坐标系，这样我就可以轻松计算子SVG的位置，这将非常好。

不是所有的需求都可以同时满足。要使父对象和子对象具有相同的坐标系，父对象需要设置一个与其子对象坐标系相匹配的视图框。但是“固定”子对象被定位在该坐标系中，当父对象更改其高度时，其高度将被缩放（我将假设父对象的宽度和高度在样式表中设置）：

<svg id="parent" viewBox="0 0 500 400" preserveAspectRatio="none">
    <svg id="noPreserveRatio" width="100%" height="100%"
         viewBox="0 0 500 400" preserveAspectRatio="none">
         ...
    </svg>
    <!-- always at the bottom, but no fixed height -->
    <svg id="fixed" x="0" y="300" width="100%" height="100"
         viewBox="..." preserveAspectRatio="...">
         ...
    </svg>
</svg>

<svg id="parent">
    <svg id="noPreserveRatio" width="100%" height="100%"
         viewBox="0 0 500 400" preserveAspectRatio="none">
         ...
    </svg>
    <!-- always the same height, but not guaranteed to end at the bottom -->
    <svg id="fixed" x="0%" y="75%" width="100%" height="100"
         viewBox="..." preserveAspectRatio="...">
         ...
    </svg>
    <!-- ...but a small trickery can solve that: -->
    <svg id="fixed" x="0%" y="100%" width="100%" height="100px"
         transform="translate(0, -100)"
         viewBox="..." preserveAspectRatio="...">
         ...
    </svg>
</svg>