Question

我已经在这种形式中嵌套了SVG，其中父SVG可以改变它的宽度和高度：

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

我希望SVG的id =＆＃34;固定＆＃34;相对于父SVG始终具有相同的高度（比如100px）和宽度= 100％。我希望SVG的id =＆＃34; noPreserveRatio＆＃34;完全填充父容器。我尝试过使用视图框的不同方法并保留纵横比但无法达到预期效果。如果我的嵌套和父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>

要获得固定高度，您需要省略父视图框，但是您只能使用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>

修复了嵌套svg底部的svg

1 个答案: