Wie skaliere ich ein SVG-Bild, um das Browserfenster zu füllen?

Das scheint einfach zu sein, aber ich bekomme einfach nichts.

Ich möchte eine HTML-Seite erstellen, die ein einzelnes SVG-Bild enthält, das automatisch an das Browserfenster angepasst wird, ohne zu scrollen und das Seitenverhältnis beizubehalten.

Zum Beispiel habe ich im Moment ein SVG-Bild von 1024 x 768; Wenn das Browser-Ansichtsfenster 1980x1000 ist, soll das Bild bei 1333x1000 angezeigt werden (vertikal füllen, horizontal zentriert). Wenn der Browser 800x1000 war, soll er bei 800x600 angezeigt werden (horizontal füllen, vertikal zentrieren).

Derzeit habe ich es so definiert:

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

Dies skaliert jedoch auf die gesamte Breite des Browsers (für ein breites, aber kurzes Fenster) und erzeugt vertikales Scrollen, was ich nicht möchte.

Was vermisse ich?

— Miral
quelle

Unerklärlicherweise habe ich versucht, die Inline-Stilattribute in einen CSS-Stilblock im Kopf zu verschieben, und danach hat es funktioniert. Ich weiß nicht, warum es einen Unterschied gemacht hat. (Obwohl ich einen Überlauf hinzufügen musste: versteckt - ansonsten gab es eine vertikale 4-Pixel-Schriftrolle.)

— Miral

175

Wie wäre es mit:

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

Oder:

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

Ich habe ein Beispiel auf meiner Website, das (ungefähr) diese Technik verwendet, allerdings mit 5% Füllung ringsum und position:absoluteanstelle von position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Die Verwendung position:fixedverhindert ein sehr randvolles Szenario beim Verknüpfen mit einem Unterseitenanker auf der Seite und overflow:hiddenkann sicherstellen, dass niemals Bildlaufleisten angezeigt werden (falls Sie zusätzlichen Inhalt haben.)

— Phrogz
quelle

Und eine späte +1 für das Verlassen dieser Verbindung 2 Jahre später.

— Msanford

Beachten Sie, dass diese Lösung auf dem viewBoxAttribut basiert.

— Ubershmekel

Der Link ist immer noch da, fast 4 Jahre später. Gute Arbeit, @Phrogz!

— Richard

Ja, danke @Phrogz ... Und für den Fall, dass es jemals ausfällt, habe ich eine Codepen-Version erstellt: codepen.io/cyanos/full/XbXxOQ

— Jay

Und +1 seit über 8 Jahren

— Sudhir Kaushik