Как масштабировать SVG-изображение, чтобы заполнить окно браузера?

Кажется, что это должно быть легко, но я просто ничего не получаю.

Я хочу создать HTML-страницу, содержащую одно изображение SVG, которое автоматически масштабируется в соответствии с окном браузера без прокрутки и сохранения его соотношения сторон.

Например, на данный момент у меня есть SVG-изображение 1024x768; если окно просмотра браузера равно 1980x1000, тогда я хочу, чтобы изображение отображалось с разрешением 1333x1000 (заполнение по вертикали, по центру по горизонтали). Если браузер был 800x1000, тогда я хочу, чтобы он отображался с разрешением 800x600 (горизонтально, вертикально по центру).

В настоящее время я определил его так:

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

Однако это масштабирование до полной ширины браузера (для широкого, но короткого окна) и создания вертикальной прокрутки, чего я не хочу.

Что мне не хватает?

Ответ 1