修正嵌套svg底部的svg

Question

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

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

我希望带有id=“固定”的SVG始终具有与父SVG相同的高度(例如100 to )和width=100%。我希望带有id="noPreserveRatio“的SVG完全填充父容器。我尝试过使用viewbox和保存高宽比的不同方法，但没有达到预期的结果。如果我的嵌套SVG和父SVG有相同的坐标系，这样我就可以很容易地计算子SVG的位置，那就太好了。

Answer 1

并不是所有的需求都可以同时完全满足。要使父级和子级具有相同的坐标系，父级需要设置适合其子级的viewBox。但是，“固定”子节点位于该坐标系中，当父级更改其高度时，其高度将被缩放(我将假设父级的宽度和高度设置在样式表中)：

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

要达到固定的高度，您需要省略父viewBox，但是您只能使用x和y的相对单位来描述子节点的位置。另一方面，transform属性可以使用绝对单位(基本上是屏幕像素)：

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