Содержание SVG - только ширина шкалы и полная высота

Question

Я создал SVG с текстом foreignObject и связал его на моей HTML-странице с помощью тега img.

Проблема в том, что ширина svg масштабируется как устройство, но высота фиксируется около 153 пикселей. Я установил ширину и высоту svg на 100%.

Я не могу обеспечить фиксированную высоту для svg, потому что я хочу, чтобы текстовая часть реагировала и масштабировалась как устройство.

Так что текстовое содержимое foreignObject обрезается, так как изображение не показывает высоту в полном объеме.

Я пробовал viewBox и сохранялApectRatio безуспешно.

вот Jsfiddle example

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/> 

скриншот от фактического использования

Я не могу использовать любой JS для любого решения в этой ситуации.

Answer 1

ВЭкран-процентная длина:

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

окно просмотр-процентный длины по отношению к размеру начальных содержащему блок. Когда изменяется высота или ширина исходного блока , они соответственно масштабируются. Однако , когда значение переполнения на корневом элементе является авто, любая строка прокрутки считается, что она не существует. В качестве альтернативы настройки высоты обоих HTML/корпусного элемента до 100%, можно также использовать окно просмотра-процентного длины:

body { 
 
    height: 100vh; 
 
} 
 
img { 
 
    width: 100%; 
 
    height:100%; 
 
}

<img src="http://treebliss.com/shipping.svg" />

Answer 2

Изображение должно быть в контейнере с высота 100% (В.Х.)

Я создал fiddle

div { 
text-align: center; 
height: 100vh; 
} 
img { 
border: thin dotted darkgrey; 
width: 100%; 
height: 100%; 
}