Цель состоит в том, чтобы HTML-код, встроенный в элемент SVG, занимал всю ширину и высоту корневого элемента SVG, который сам встроен в документ HTML.
Однако, как вы можете видеть из Codepen, атрибут width, кажется, работает, но атрибут height не влияет на корневой элемент SVG. В результате встроенный div не имеет высоты 2688 пикселей.
В конечном итоге корневой элемент SVG и его содержимое должны иметь размер 1242x2688.
Что не так?
https://codepen.io/anon/pen/zyJZbr
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
Why is this height wrong?
</div>
</foreignObject>
</svg>