Wie verwende ich das Attribut <svg> viewBox?

Ich lerne svg aus seinen offiziellen Dokumenten, es gibt eine solche Linie. Ich verstehe es nicht, wenn es bereits ein widthund height-Attribut hat, wozu soll es dann noch einmal angegeben werden viewBox="0 0 1500 1000"? Es heißt: "Eine px-Einheit ist so definiert, dass sie einer Benutzereinheit entspricht. Daher entspricht eine Länge von" 5px "der Länge von" 5 "in den offiziellen Dokumenten. Daher ist diese viewBox 1500px breit und 1000 Höhenansicht, die 300px und 200px überschreitet. Warum definiert es überhaupt den Wert für Breite und Höhe?

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

Die Breite und Höhe sind wie groß das <svg>ist. Die viewBox steuert, wie der Inhalt angezeigt wird, sodass die viewBox = "0 0 1500 1000" den Inhalt des <svg>Elements um den Faktor 5 ( 1500/300 = 5 und 1000/200 = 5) verkleinert und der Inhalt 1 / beträgt. 5 die Größe, die sie ohne die viewBox wären, aber die<svg>

Stellen Sie sich vor, Sie haben eine elastische Oberfläche und schneiden sie in 4 gleiche Stücke. Wenn Sie 3 Teile wegwerfen, erhalten Sie eine Oberfläche, die 1/4 der Größe der ursprünglichen Oberfläche entspricht. Wenn Sie jetzt die Oberfläche dehnen und dieselbe Größe wie die ursprüngliche Oberfläche festlegen, ist alles auf der Oberfläche doppelt so groß. So hängen viewBox und Breite / Höhe zusammen.

Wenn Sie kein Ansichtsfeld angeben, werden alle Zahlen ohne Einheit in einem Element als Pixel angenommen. (und SVG nimmt 90 dpi oder Pixel pro Zoll für die Konvertierung von Einheiten wie cm in Pixel an.)

In einem Ansichtsfeld können Sie einheitlose Zahlen in Elementen als "Benutzereinheiten" festlegen und festlegen, wie diese Einheiten der Größe zugeordnet werden. Betrachten Sie der Einfachheit halber nur die x-Koordinaten, dh ein Lineal. In Ihrem Ansichtsfeld wird angegeben, dass Ihr Lineal 1500 Einheiten hat, die der 200-Pixel-Breite des SVG entsprechen.

Ein Linienelement von 0 bis 1500 (ohne Einheit, dh Benutzereinheiten) würde 200 Pixel wie gezeichnet strecken, dh über die Breite der SVG-Zeichnung.

(Und da SVG ohne Auflösungsverlust skalierbar ist, bedeuten Pixel in der realen Welt nicht viel, wenn ein Benutzer hinein- oder herauszoomt.)

Es ist eine Art Koordinatentransformation.

Ich schlage vor, Sie lernen aus einem Buch wie "SVG Essentials", das etwa 10 US-Dollar kostet und aus dem ich diese Antwort lose zitiere.

Standardmäßig

<svg width="300" height="200">

Das "Lineal" des SVG-Gitters ist in Pixel angegeben (alle Formen in diesem SVG werden in Pixel gemessen).

Wenn Sie jedoch Ihre eigenen Einheiten verwenden möchten, können Sie dafür viewBox attr verwenden:

<svg width="300" height="200" viewBox="0 0 1500 1000">

Das bedeutet:

horizontale Achse: 1500 (Ihre Breiteneinheit) = 300px => 1 (Ihre Breiteneinheit) = 300 / 1500px = 1 / 5px

vertikale Achse: 1000 (Ihre Höheneinheit) = 200px => 1 (Ihre Höheneinheit) = 200 / 1000px = 1 / 5px

• Jetzt werden alle Formen im SVG skaliert:

Ihre Breiten skalieren im Vergleich zum Ursprung auf 1 / 5px (1/5 <1 => verkleinern).

Ihre Höhen skalieren im Vergleich zum Ursprung ebenfalls auf 1 / 5px (1/5 <1 => verkleinern)

MAIN:

• Das viewBox-Attribut ist eng mit dem Begriff Ansichtsfenster in SVG verwandt

ABKÜRZUNG:

• viewBox - VB
• Ansichtsfenster - VP
• Ansichtsfenster-Koordinatensystem - VCS
• lokales Koordinatensystem - LCS

SYNTAX:

<svg x = "VP_min_X" y = "VP_min_Y" width = "VP_width" height = "VP_height"
viewBox = "VB_min_X VB_min_Y VB_width VB_height">

STANDARDWERTE:

• Einheiten = px
• Ansichtsfensterbreite = 300
• Breite des Ansichtsfensters = 150
• viewBox = Ansichtsfenster

CODE MIT STANDARDWERTEN

<svg>

CODE MIT DEM GLEICHEN ERGEBNIS:

<svg x = "0" y = "0" width = "300" height = "150" viewBox = "0 0 300 150">

VIEWPORT-EINSTELLUNGEN:
DER URSPRUNGSPUNKT des Viewport-Koordinatensystems (VCS):

• VP_min_X
• VP_min_Y

Im Fall des äußersten Ansichtsfensters spielen diese Werte keine Rolle und sind in jedem Fall gleich 0, sie werden normalerweise weggelassen:

<svg width = "100" height = "150">

CODE MIT DEM GLEICHEN ERGEBNIS: (für das äußerste Ansichtsfenster):

<svg x = "10" y = 20 "width ="100 "height ="150">

NESTED VIEWPORT: Definieren Sie
in einem verschachtelten Ansichtsfenster (VP_min_X, VP_min_Y) den Einzug vom Ursprungspunkt von VCS:

<svg width="100%" height="100%"> <!-- external viewport = full browser size -->
     <svg x="50" y="100" width="200" height="300" viewBox="0 0 100 100">
     </svg>
</svg>

In diesem Fall Einzug des verschachtelten Ansichtsfensters:
50 Pixel entlang der X-Achse und 100 Pixel entlang der Y-Achse vom Ursprungspunkt des externen VCS.

Die Abmessungen des rechteckigen Bereichs (Ansichtsfenster), in dem SVG-Grafiken gezeichnet werden, werden bestimmt:

• VP_width
• VP_height

VIEWBOX-EINSTELLUNGEN:
DER URSPRUNGSPUNKT des lokalen Koordinatensystems (LCS):

• Vb_min_X
• Vb_min_y

DIE GRÖSSE des sichtbaren Teils des SVG-Bildes:

• Vb_width
• Vb_height

RENDERING:
Bei der Erstellung des endgültigen SVG-Bildes werden die Koordinatensysteme durch KOMBINIEREN transformiert:
Ursprungspunkte von Koordinatensystemen:

• VCS (VP_min_X, VP_min_Y)
• LCS (VB_min_X, VB_min_Y)

Endpunkte des sichtbaren Bildbereichs:

• VCS (VP_width, VP_height)
• LCS (VB_width, VB_height)

FÄHIGKEITEN:
Dadurch wird es möglich zu kontrollieren:

• Position des Ansichtsfensters im Browserfenster [Verwenden des verschachtelten Ansichtsfensters und Ändern (VP_min_X, VP_min_Y)]
• Ansichtsfenstergrößen (VP_width, VP_height)
• Schwenken des sichtbaren Teils des Bildes [Verwenden von viewBox und Ändern (VB_min_X, VB_min_Y)]
• Skalieren des sichtbaren Teils des Bildes [Verwenden von viewBox und Ändern (VB_width, VB_height)]

VISUALISIERUNG: 2 Minuten auf YouTube, um die oben beschriebenen Prinzipien zu verstehen:
Video ViewBox in SVG

DOKUMENTATION:
W3C 2019 SVG 2-Spezifikation

viewbox ist ein Verhältnis

In meiner bescheidenen Erfahrung habe ich immer als <svg>‚s - viewboxWerte als erforderlich Bild Verhältnis zu den anwenden widthund heightWerten. Während der Definition der Laters, die ich gerade mit einem <img>im DOM mache , entweder Inline-HTML-Eigenschaften oder über CSS, gilt die Viewbox-Eigenschaft nur für die SVG-Datei.

Hier sind einige praktische Informationen, die ich nützlich finde, um SVG viewPort und viewBox zu verstehen (und insbesondere damit zu arbeiten).

SVG verwendet die Begriffe viewPort und viewBox. Die viewBox befindet sich im viewPort. Stellen Sie sich die viewBox als das Bild selbst vor - weil Sie es zoomen und nach links / rechts / oben / unten schieben können - alles innerhalb des viewPort. Der viewPort (das SVG-Tag selbst) ähnelt einem Container, in dem sich das SVG-Bild befindet. Sie können diese Größe auch ändern und sie nach links / rechts / oben / unten verschieben. Das SVG-Tag befindet sich in einem HTML-Container (div, p, beiseite, h3 usw.). Sie können also sehen, warum die Leute viewPort / viewBox als etwas verwirrend empfinden. Stellen Sie sich viewBox als das Bild selbst vor.

Die Attribute width / height im SVG-Tag geben die Größe des viewPort an. Dies ist die Breite / Höhe des Containers, in dem das SVG-Bild angezeigt wird. (Sie können auch x=""und y=""Attribute haben, genau wie Sie es im viewBox-Attribut haben.)

In der SVG selbst geben Sie also Breite / Höhe und Start-x-Versatz / Start-y-Versatz an - diese werden als viewPort (auch bekannt als ViewPort-Koordinatensystem) bezeichnet. Im viewBox-Attribut geben Sie "xy-Breitenhöhe" an - diese werden als viewBox bezeichnet (auch bekannt als Local Coord System LCS)

<svg x="0" y="0" width="500" height="300"
  viewBox="start_x  start_y  width  height" >
  ...path fill d etc...
</svg>

Wichtiges Konzept Nr. 1: Die Breite / Höhe des viewPort (diejenigen, die sich auf dem SVG-Tag selbst befinden, als width = "" und height = "") geben die Größe des Containers an, in dem das SVG-Bild angezeigt wird. Normalerweise oder wenn weggelassen, ist dies die exakte Größe des SVG-Bildes selbst (oder ein kleines bisschen größer als dieses).

Superwichtiges Konzept Nr. 2: Die Breite / Höhe der viewBox steht in direktem Zusammenhang mit der Breite / Höhe des viewPort. Wenn der viewPort 300 x 500 ist, wird das Bild selbst im viewPort kleiner (zoomt heraus) , wenn die viewBox W / H- Zahlen größer als 300 x 500 werden. Wenn die viewBox w / h jedoch kleiner als 300 x 500 wird, wird das Bild selbst im viewPort größer. Dieses Wachstum ist rechts und unten. Wenn Sie also das vergrößerte Bild im jetzt zu kleinen viewPort verschieben müssen, verwenden Sie die X / Y- Werte der viewBox.

viewBox x / y - Schiebt die SVG-Datei im viewPort nach rechts / unten

viewBox width / height - Wenn die Vergrößerung größer als die Breite / Höhe des SVG-Tags ist, wird das Bild im viewPort nach außen gezoomt. Das SVG wird im Ansichtsfenster nach rechts / unten verkleinert. Verringern Sie die Anzahl unter den SVG-Attributen für Breite / Höhe: Das Bild wächst im Ansichtsfenster, bis Teile des Bilds rechts / unten von der rechten Seite / Unterseite des Ansichtsports abgeschnitten werden. * (dh wenn die Breiten- / Höhenzahlen im viewBox-Attribut kleiner als die width / height-Attribute im SVG sind, wird das Bild im viewPort vergrößert. Wenn es größer ist, wird das Bild mit dem viewPort vergrößert (verkleinert).

viewPort x / y == schiebt das Ansichtsfenster selbst innerhalb seines HTML-Containers nach rechts / unten. viewPort width / height - Ändert die Größe des gesamten viewPort und vergrößert möglicherweise den HTML-Container (div / p / etc). Vergrößert den viewPort grundsätzlich, indem er nach rechts / unten vergrößert wird.

Anmerkungen:
a. Wenn Sie das ViewBox-Attribut nicht in die SVG-Datei aufnehmen, entspricht die Größe der viewBox der Größe des viewPort (nimmt 100% des viewPort ein).
B. Wenn die viewBox beginnt 0,0und dieselbe Breite / Höhe wie die SVG-Breite / Höhe (dh der viewPort) hat, ändert sich nichts. Entspricht dem Fehlen eines Viewbox-Attributs.
c. Wenn Sie einen viewPort in der Größe eines Kartenspiels haben, das SVG-Bild jedoch die Größe einer Müslischachtel hat, wird durch Erhöhen der viewBox-Zahlen "xy ..." das Müslischachtelbild im viewPort nach oben / links verschoben, wobei ein anderes angezeigt wird Teil des Müslischachtelbildes. Dies wäre nützlich bei Sprites
d.(Normalerweise (immer!) Befindet sich das SVG-Element auch in einem HTML-Container - einem div, p, section, li, was auch immer. Wir haben dies nicht besprochen, aber denken Sie daran. Wenn Ihr Bild abgeschnitten wird, dann entweder die viewBox ist größer als der viewPort -OR- das HTML-Containerelement (div usw.) ist kleiner als der viewPort)

Hier sind zwei (ausgezeichnete!) Kurzvideos, auf die uns der Autor dieser Antwort in demselben Thread verwiesen hat :

2min Videodemo 5min
Videodemo (gleicher Typ, viel besser)