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

在下面的代码中,rootBox和imageBox1具有相同的维度。图像应覆盖整个米色背景。

尽管共享相同的宽度和高度值,imageBox1还是比rootBox小。

如何让imageBox1使用像素(而不是百分比)匹配根框?

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>