修复了嵌套 svg 底部的 svg答案

【问题标题】：Fixed svg in the bottom of a nested svg修复了嵌套 svg 底部的 svg
【发布时间】：2018-04-20 18:44:01
【问题描述】：

我以这种形式嵌套了 SVG，父 SVG 可以更改其宽度和高度：

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

我希望 id="fixed" 的 SVG 相对于父 SVG 始终具有相同的高度（例如 100 像素）和宽度 = 100%。我希望 id="noPreserveRatio" 的 SVG 完全填充父容器。我尝试了使用视图框并保留纵横比的不同方法，但无法达到预期的效果。如果我的嵌套 SVG 和父 SVG 具有相同的坐标系，那就太好了，这样我就可以轻松计算子 SVG 的位置。

【问题讨论】：

标签： d3.js svg

【解决方案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的相对单位来描述子viewBox的定位。另一方面，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>

【讨论】：