SVG Viewport und viewBox (für komplette Anfänger)

In diesem kurzen Tipp werden wir genau festlegen, welches Viewport und viewBox sind in SVG. Du wirst lernen:

• Der Unterschied zwischen dem Ansichtsfenster und viewBox
• Die Aspekte Ihrer SVGs können Sie mit jedem steuern
• Wie sie jeweils angewendet werden

Lass uns anfangen!

SVG-Ansichtsfenster 

Wenn Sie das Wort „Viewport“ buchstäblich auflösen, erhalten Sie einen Hinweis auf seine Rolle in SVG. Es erstellt einen "Port", über den Sie einen Abschnitt einer SVG "anzeigen" können. Sie können sich vorstellen, dass es sich dabei um ein Bullauge handelt, durch das Sie die Welt dahinter sehen können.

Das SVG-Ansichtsfenster ähnelt einem Bullaugenfenster, dessen Größe bestimmt, was Sie durch es sehen können

Wie bei einem Fenster bestimmt die Größe des Ansichtsfensters, wie viel Sie sehen können. Die Größe des Ansichtsfensters wird jedoch nicht definiert. Was auf der anderen Seite ist, könnte theoretisch eine beliebige Größe haben.

Beispielsweise haben Sie möglicherweise eine Form in Ihrer Grafik 100px durch 100px, aber wenn Sie den Viewport auf setzen 50px durch 50px Sie sehen nur einen Teil dieser Form. Die Größe des Ansichtsfensters wird durch Hinzufügen festgelegt Breite und Höhe Attribute zum svg Element wie folgt:

Im ersten SVG sehen wir das Ganze 100px durch 100px Kreis, aber in der zweiten SVG, wenn wir die Größe des Darstellungsbereichs auf 50px durch 50px Wir sehen nur ein Viertel des Kreises.

SVG-ViewBox

Das viewBox Man kann sich genau wie der Viewport vorstellen, hat aber zwei zusätzliche Funktionen: Er kann "schwenken" und er kann "zoomen". Aufbauend auf der Analogie zum "Durchschauen", wenn der Darstellungsbereich einem Fenster ähnelt, wird das viewBox ist wie ein Teleskop.

Die SVG-ViewBox ist dem Viewport sehr ähnlich, kann aber auch wie ein Teleskop schwenken und zoomen

viewBox-Parameter

Wir kontrollieren das viewBox indem Sie es als Attribut zum hinzufügen svg Element mit einem Wert, der aus vier durch Leerzeichen getrennten Zahlen besteht:

viewBox =    

Die ersten beiden Zahlen definieren die Position der viewBox, was wir als "Schwenken" vorstellen. Die letzten beiden Zahlen definieren die Abmessungen der viewBox, was wir als "Zoomen" betrachten.

Hinweis: ebenso wie svg Element, das viewBox Attribut kann auch für die Elemente verwendet werden Symbol, Marker, Muster und Aussicht.

Zoomen

Wir beginnen mit dem Zoomen, das wir mit den letzten beiden machen können viewBox Parameter: Breite und Höhe beziehungsweise. Die ersten beiden Parameter belassen wir bei 0 0 zur Zeit.

Wenn die letzten beiden Parameter dieselben Abmessungen wie das Ansichtsfenster haben, wird nicht vergrößert oder verkleinert, sodass sich nichts ändert. Schauen Sie sich zum Beispiel SVG Nummer 3 an:

Wenn diese beiden Zahlen jedoch größer sind als die Abmessungen des Ansichtsfensters, werden wir effektiv herauszoomen. Wenn wir sie verkleinern, vergrößern wir sie.

In SVG Nummer 4 im obigen Beispiel haben wir das gesetzt viewBox Breite und Höhe zu 100, Das ist doppelt so groß wie unser Viewport. Dies „verkleinert“ und zeigt doppelt den Inhalt, wodurch der gesamte Kreis wieder sichtbar wird.

Im fünften SVG unser viewBox ist auf a gesetzt Breite und Höhe von 25, Das ist halb so groß wie unser Viewport. Dies vergrößert sich und zeigt die Hälfte des Inhalts.

Schwenken

Die ersten zwei viewBox Mit diesen Parametern können Sie „schwenken“, indem Sie festlegen, wo sich die obere linke Ecke des Fensters befindet viewBox sollte sein. Die erste Zahl steuert die horizontale Position und die zweite die vertikale Position.

• Um nach rechts zu schwenken, erhöhen Sie die erste Zahl. 
• Zum Schwenken nach links verringern Sie die erste Zahl.
• Um nach unten zu schwenken, erhöhen Sie die zweite Zahl. 
• Zum Schwenken verringern Sie die zweite Zahl.

Sehen Sie sich in diesem Beispiel an, wie dieses Panning funktioniert. Zur Erinnerung: SVG Nummer 3 hat eine 50 durch 50 Viewport, der viewBox wird hinzugefügt, jedoch ohne Verschieben oder Zoomen. Nummer 6 ist gleich, aber nach rechts und unten geschwenkt:

Zusammen schwenken und zoomen

Sie können natürlich gleichzeitig schwenken und zoomen, indem Sie alle vier Parameter gleichzeitig verwenden, z.

Wenn Sie viewBox verwenden, legen Sie Ihren Viewport fest

Wann immer Sie das benutzen viewBox Attribut, denken Sie daran, auch die Abmessungen Ihres Darstellungsbereichs festzulegen. Andernfalls werden sie standardmäßig auf 100% gesetzt und Sie haben wahrscheinlich eine übergroße Grafik:

In einer Nussschale

Lassen Sie uns alles auf einige Punkte hinreißen:

• Das Ansichtsfenster ist wie ein Fenster, durch das Sie den Inhalt einer SVG sehen.
• Das viewBox ähnelt dem Ansichtsfenster, Sie können es aber auch wie ein Teleskop zum „Schwenken“ und „Zoomen“ verwenden.
• Kontrollieren Sie den Viewport über Breite und Höhe Parameter auf der svg Element.
• Steuern Sie die ViewBox, indem Sie das Attribut hinzufügen viewBox zum svg Element. Es kann auch für die Elemente verwendet werden Symbol, Marker, Muster und Aussicht.
• Das viewBox Der Wert des Attributs besteht aus vier durch Leerzeichen getrennten Parametern.
• Die ersten zwei viewBox Parameter steuern "Schwenken" und die letzten beiden steuern "Zoomen"..
• Erhöhen Sie den ersten Parameter nach rechts, schwenken Sie ihn nach links.
• Erhöhen Sie den zweiten Parameter auf „Pan“, verringern Sie ihn auf „Pan“.
• Mach das viewBox Dimensionen, d. h. die letzten beiden Parameter, größer als diejenigen des Ansichtsfensters zum Verkleinern und kleiner zum Verkleinern.

Ich hoffe, das hilft bei der Klärung der manchmal trüben Gewässer von SVG Sichtfenster und viewBox. Happy SVG erstellen!

Weitere SVG-Grundlagen