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

94

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?

layout xhtml svg scaling aspect-ratio 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

Antworten:

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
38
Und eine späte +1 für das Verlassen dieser Verbindung 2 Jahre später.
Msanford
7
Beachten Sie, dass diese Lösung auf dem viewBoxAttribut basiert.
Ubershmekel
4
Der Link ist immer noch da, fast 4 Jahre später. Gute Arbeit, @Phrogz!
Richard
10
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
5
Und +1 seit über 8 Jahren
Sudhir Kaushik