Jak przeskalować obraz SVG, aby wypełnił okno przeglądarki?

Wydaje się, że powinno to być łatwe, ale po prostu czegoś nie rozumiem.

Chcę utworzyć stronę HTML zawierającą pojedynczy obraz SVG, który jest automatycznie skalowany w celu dopasowania do okna przeglądarki, bez przewijania i przy zachowaniu współczynnika proporcji.

Na przykład w tej chwili mam obraz SVG 1024x768; jeśli rzutnia przeglądarki ma wymiary 1980 x 1000, chcę, aby obraz był wyświetlany w rozmiarze 1333 x 1000 (wypełnienie w pionie, wyśrodkowanie w poziomie). Jeśli przeglądarka miała rozmiar 800x1000, chcę, aby wyświetlała się w rozmiarze 800x600 (wypełnienie w poziomie, wyśrodkowanie w pionie).

Obecnie mam to tak zdefiniowane:

<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>

Jednak jest to skalowanie do pełnej szerokości przeglądarki (dla szerokiego, ale krótkiego okna) i generowanie przewijania w pionie, czego nie chcę.

czego mi brakuje?

— Miral
źródło

Z niewyjaśnionych przyczyn próbowałem przenieść atrybuty stylu wbudowanego do bloku stylu CSS w głowie, a potem zadziałało. Nie wiem, dlaczego to miało znaczenie. (Chociaż musiałem dodać przepełnienie: ukryte - w przeciwnym razie było 4-pikselowe przewijanie w pionie.)

— Miral

175

Co powiesz na:

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

Lub:

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

Mam na mojej stronie przykład, w którym (w przybliżeniu) zastosowano tę technikę, aczkolwiek z 5% dopełnieniem dookoła i position:absolutezamiast position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Użycie position:fixedzapobiega bardzo skrajnemu scenariuszowi linkowania do kotwicy podstrony na stronie i overflow:hiddenmoże zapewnić, że żadne paski przewijania nigdy się nie pojawią (w przypadku dodatkowej zawartości).

— Phrogz
źródło

I późne +1 za pozostawienie tego linku 2 lata później.

— msanford,

Zauważ, że to rozwiązanie opiera się na viewBoxatrybucie.

— ubershmekel

Link nadal istnieje, prawie 4 lata później. Dobra robota, @Phrogz!

— Richard

Tak, dzięki @Phrogz ... I na wszelki wypadek zrobiłem wersję codepen

— Jay

I +1 od ponad 8 lat

— Sudhir Kaushik