SVG: чтобы дочерний элемент соответствовал ширине и высоте родительского элемента, используя пиксели, а не проценты?

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.