Гибкий центрированный SVG

Question

Я хочу, чтобы гибкий центрированный svg, который:

1. будет уменьшаться при изменении размера родительского окна / ширины / высоты
2. Сосредоточится (занимая все доступное пространство)

Мне удалось сделать почти все, кроме того, по какой-то причине SVG не сжимается по вертикали при изменении размера окна менее чем ~ 100px, но если вы сузите окно по горизонтали, это будет: /

Пример Codesandbox

Есть идеи?

Answer 1

Если вы используете в SVG модуль, относящийся к области просмотра, он будет уменьшаться, поэтому, например, установите height: 100vh в svg.