嵌套SVG viewBox和preserveAspectRatio以对齐<img/>

Question

我正在使用D3.js构建一个svg。在其中我使用<image>来放置两种类型的图片img1和img2，其中两个图片的宽度W相同，但img1比img2短即H1<H2。

它们应放置在外部svg中，位于W的尺寸为H2 x (x,y)的矩形中，较短的一个（img1）应垂直对齐这个矩形的底部是这样的：

这听起来像viewBox＆amp; preserveAspectRatio所以我尝试在<svg>位置创建一个尺寸为W x H2（2个高度中较大的一个）的嵌套(x,y)元素，具体取决于图片每次动态添加，布局（这里显示两个图像）将是：

示例代码，W = 35，H1 = 19，H2 = 88，x = 100，y = 200：

```

<svg...> <!--outer SVG-->
    <svg width="35" height="88" x="100" y="200" viewBox="0 0 35 88" preserveAspectRatio="xMidYMax meet"> <!-- nested SVG-->
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img1_OR_img2" width="35" height="CORRESPONDING_img_HEIGHT"></image>
    </svg> <!-- end of nested SVG-->
</svg> <!-- end of outer SVG-->

```

问题是嵌套svg的高度被忽略，它是定义矩形高度的<image>的高度。所以无论我在嵌套的svg中通过preserveAspectRatio要求什么垂直对齐，在较短的图像img1的情况下它都没有区别，因为矩形已经是{{1的高度}}。如果我img1总是有更大的高度<image>，那么较小的图片H2会在中间垂直对齐。

我应该使用完整的不同子结构而不是嵌套的svg，还是我滥用img1 / viewBox组合？

注意：关于主题preserveAspectRatio＆amp; viewBox，我使用了this article，这是我迄今为止在网上找到的最好的内容（感谢Sara发表了一篇精彩的文章）。

Answer 1

你的问题是你正在改变高度。在这两种情况下，您应该使用88作为“CORRESPONDING_img_HEIGHT”。您需要为两个图像使用相同的视口，并让SVG根据preserveAspectRatio设置在视口中定位图像。

实际上，您不需要使用嵌套的SVG。 <image>元素也有preserveAspectRatio属性。

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="100" y="200" width="35" height="88" xlink:href="img1" pereserveAspectRatio="xMidYMax meet"/>
    <image x="100" y="200" width="35" height="88" xlink:href="img2" pereserveAspectRatio="xMidYMax meet"/>
</svg>