Как масштабировать изображение 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 72
svg fluid-layout xhtml-1.0-strict scaling aspect-ratio

1 ответ:

как насчет:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

или:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

у меня есть пример на моем сайте, используя (примерно) эту технику, хотя и с 5% заполнением вокруг, и используя position:absolute вместо position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(через position:fixed предотвращает очень крайний сценарий привязки к якорю подстраницы на странице и overflow:hidden может гарантировать, что полосы прокрутки никогда не появятся (в случае, если у вас есть дополнительные содержание.)

134