Question

在下面的代码中，rootBox和imageBox1的尺寸相同。图片应覆盖整个米色背景。

尽管宽度和高度值相同，但是imageBox1小于rootBox。

如何使用像素（而不是百分比）使imageBox1匹配rootBox？

Codepen：https://codepen.io/anon/pen/REKWmJ

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg id="rootBox" width="500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="0%" y="0%" width="100%" height="100%" fill="beige" />

    <svg id="imageBox1" width="500" height="800">
       <image class="frame" x="0" y="0" width="100%" height="100%" xlink:href="https://www.dropbox.com/s/6njspwfz2hgfd03/iPhone_X_Black.png?raw=1" />
    </svg>
</svg>

Answer 1

将preserveAspectRatio属性设置为“ none”可以解决此问题。该答案提供了有关为什么发生此问题的更多详细信息https://stackoverflow.com/a/9409554/10085266。

SVG：使用像素而不是百分比使子元素匹配父元素的宽度和高度？

1 个答案: