SVG Viewport und ViewBox

Der Viewport und der ViewBox des SVG-Bildes können die Größe des sichtbaren Bildteils einstellen.

Unterschied zwischen viewport und viewbox

1、viewport ist der sichtbare Bereich, was bedeutet, dass er dem Bildschirm entspricht.

2、viewbox ist der Ansichtsraum, was bedeutet, dass ein kleines Stück des Bildschirms auf dem Bildschirm abgebildet wird und dann auf die gesamte Oberfläche vergrößert wird, was das Effekt einer Nahaufnahme ist.

3、preserveAspectRatio gibt die Ausrichtung und das Skalierungsverhalten von viewbox und viewport an.

Viewport

Der Viewport ist der sichtbare Bereich des SVG-Bildes. Logischerweise kann das SVG-Bild so breit und hoch sein, wie Sie möchten, aber nur ein bestimmter Teil des Bildes kann gleichzeitig gesehen werden. Der sichtbare Bereich wird als Viewport bezeichnet.

Sie können die width- und height-Attribute des Elements verwenden, um die Größe des Viewports zu spezifizieren <svg>. Hier ist ein Beispiel:

<svg width="500" height="300"></svg>

Der in diesem Beispiel definierte Viewport ist500 Einheiten breit und300 Einheiten hoch.

Koordinatensystem-Einheiten

Wenn Sie in den width- und height-Attributen keine Einheit angeben, wird angenommen, dass die Einheit Pixel ist. Das heißt, width500 bedeutet500 Pixel.

Wenn Sie gerne andere als Pixel Einheiten verwenden, können Sie dies tun. Hier ist eine Liste der Einheiten, die mit dem <svg>-Element verwendet werden können:

Die auf dem <svg>-Element festgelegten Einheiten beeinflussen nur die Größe des <svg>-Elements (Viewport). Die Größe der SVG-Formen, die im SVG-Bild angezeigt werden, wird durch die auf jeder Form festgelegten Einheiten bestimmt. Wenn keine Einheit angegeben ist, wird die Standard-Einheit Pixel sein.

Dies ist ein Beispiel, das zeigt, dass <svg> Elemente mit einem Einheitensatz enthalten können, die mit eigenen Einheitensätzen versehenen Formen:

<svg width="10cm" height="10cm">
　　　　<rect　x="5"y="10"width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect　x="10"y="10"width="5"height="50mm"
　　　　　　　　　　style="stroke: #000000; fill: none;"　/>
</svg>

Das <svg>-Bild hat seine Einheiten cm. Beide <rect>-Elemente haben ihre eigenen Einheitensätze. Einmal in Pixel (ohne explizit gesetzte Einheit) und einmal in mm für die Breite und Höhe.

Dies ist das generierte Bild. Bitte beachten Sie, dass der rechte Rahmen (mit den Einheiten width und height in mm) größer ist als der linke Rahmen.

ViewBox

Sie können die Bedeutung der Koordinaten ohne Einheiten im <svg>-Element neu definieren. Dies kann durch das viewBox-Attribut erfolgen. Hier ist ein Beispiel:

<svg width="500" height="2"viewBox="0 0　50　2"x="
　　　　<rect　x="2"y="10"　width="10"height="5"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

In diesem Beispiel erstellt<svg> eine Breite von500 Pixel, und die Höhe ist200 die Elemente. Das viewBox-Attribut des <svg> enthält vier Koordinaten. Diese Koordinaten definieren den ViewBox(ViewBox) des <svg>-Elements. Die Koordinaten sind x y width height, die Koordinaten des ViewBox(ViewBox).

In diesem Fall beginnt der ViewBox(ViewBox) bei 0,0 und50 breit und20 hoch. Das bedeutet,500 x 200 Pixel<svg>-Element im Inneren verwendet das Koordinatensystem von 0,0 bis50,20. Mit anderen Worten, jede Koordinate in den Koordinaten des internen Formes1Einheiten<svg>entspricht der Breite500/50 = 10Pixel ist, und die Höhe entspricht200/20 = 10Pixel. Dies ist der Grund, warum die x-Position20, und die y-Position ist10warum der rechteckige Bereich wirklich liegt200,100, und seine Breite (10entsprechen und der Höhe (5entsprechen100 Pixel und50 Pixel.

Eine andere Methode zur Interpretation ist, dass die ersten beiden Koordinaten im viewBox-Attribut des <svg> die Benutzerkoordinaten des linken oberen Ecks des Elements definieren, und die letzten beiden Koordinaten die Benutzerkoordinaten des rechten unteren Ecks. Der Raum innerhalb des <svg> wird als von der oberen linken Koordinate des ViewBox bis zur unteren rechten Koordinate interpretiert.

Effekt des Bildes nach dem Lauf:

Bitte beachten Sie, wie alle Koordinaten innerhalb des <rect>-Elements interpretiert werden1Einheiten.10Pixel.

Beibehalten des Seitenverhältnisses

Wenn der Seitenverhältnis (Breitenausmaß) von Viewport und ViewBox unterschiedlich ist, muss angegeben werden, wie der SVG-Betrachter (z.B. der Browser) das SVG-Bild anzeigt. Dies kann durch die Eigenschaft preserveAspectRatio des Elements erfolgen<svg<.

Die Eigenschaft preserveAspectRatio nimmt zwei Werte an, die durch Leerzeichen getrennt sind. Der erste Wert gibt an, wie der ViewBox(ViewBox) im Viewport(Viewport) ausgerichtet wird. Dieser Wert besteht selbst aus zwei Teilen. Der zweite Wert gibt an, wie das Seitenverhältnis (falls vorhanden) beibehalten wird.

Der erste Wert der Ausrichtungsmethode wird aus zwei Teilen组成. Der erste Teil spezifiziert die Ausrichtung des x, der zweite Teil spezifiziert die Ausrichtung des y. Dies ist eine Liste der Ausrichtungswerte von x und y:

Durch Hinzufügen des y-Teils nach dem x-Teil können das x- und y-Teil zu einem Wert kombiniert werden. Dies sind zwei Beispiele:

xMaxYMax
xMidYMid

Diese beiden Beispiele stellen unterschiedliche Ausrichtungsmethoden zwischen ViewBox(ViewBox) und Viewport(Viewport) dar. Der erste Beispiel stellt die rechte Kante des Viewboxes mit der rechten Kante des Viewports ausrichtet. Der zweite Beispiel stellt die Mitte des Viewboxes mit der Mitte des Viewports ausrichtet.

Das zweite Teil des Werts der Eigenschaft preserveAspectRatio kann drei verschiedene Werte annehmen:

Das zweite Teil des Werts der Eigenschaft preserveAspectRatio wird dem ersten Teil hinzugefügt und durch Leerzeichen getrennt. Dies sind zwei Beispiele:

preserveAspectRatio="xMidYMid meet"
preserveAspectRatio="xMinYMin slice"

Ich habe die Auswirkungen der verschiedenen preserveAspectRatio-Einstellungen bisher nicht wirklich besprochen, also lassen Sie uns einsehen.

Die folgenden Beispiele setzen width auf500, height wird auf75entspricht, die viewBox-Eigenschaft auf 0 0 250 75entspricht. Dies bedeutet, dass entlang der x-Achse jeder Koordinatenbereich2Pixel, aber entlang der y-Achse wird jeder Koordinatenbereich nur1Pixel. Wie Sie sehen können, ist das Verhältnis entlang der x-Achse500/250 = 2，dem Verhältnis entlang der y-Achse ist75/75 = 1kann dies zu einer Verzerrung des Bildes führen, aber in den folgenden Beispielen werden wir sehen, wie verschiedene preserveAspectRatio-Einstellungen damit umgehen.

Dies ist das erste Beispiel, bei dem preserveAspectRatio auf xMinYMin meet gesetzt ist. Dies stellt sicher, dass das Seitenverhältnis beibehalten wird und der Größe des ViewBox (ViewBox) angepasst wird, um in den Viewport (Viewport) zu passen. Dies bedeutet, dass die beiden Seitenverhältnisse (das Verhältnis des y-Achsen ist1）den ViewBox (ViewBox) auf das kleinere Maß skalieren. Wegen der Komponente xMinYMin wird der ViewBox (ViewBox) im linken oberen Ecke des Viewport (Viewport) liegen. Dies ist der Code und das generierte Bild:

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Der zweite Beispiel hat preserveAspectRatio auf xMinYMin slice gesetzt. Dies ermöglicht es, das Seitenverhältnis zu behalten, aber es wird basierend auf dem größeren Seitenverhältnis (das Verhältnis des x-Achsen ist2）Zoomen Sie den ViewBox (ViewBox) ein, was dazu führt, dass das Bild zu groß ist, um im Viewport (Viewport) untergebracht zu werden. Das Bild wird als "Schnitt" bezeichnet.

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Der dritte Beispiel hat preserveAspectRatio auf none gesetzt. Dies bedeutet, dass der ViewBox (ViewBox) den gesamten Viewport (Viewport) füllt, was zu einer Verzerrung des Bildes führt, da die Seitenverhältnisse entlang der Achsen x und y unterschiedlich sind.

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px solid #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Ausrichtung des ViewBox (ViewBox)

Bislang alle gezeigten Beispiele haben die Einstellung xMinYMin verwendet. Abhängig davon, wie Sie den Viewport (Viewport) ausrichten möchten, können andere Einstellungen verwendet werden. Ich werde näher darauf eingehen, wie diese Einstellungen funktionieren, aber lassen Sie uns zunächst ein Beispiel betrachten:

<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMidYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMaxYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>

Dieser Beispiel zeigt ein <svg> mit dem Element width500 und height auf100。viewBox auf 0 0 50 50. Dies führt zu einem Breitenausmaß entlang des X-Bereichs von500/50 = 10，Verhältnis von Breite zu Höhe der Y-Achse100/50 =2。Der Radius des Kreises im Bild beträgt25，um seine Breite50 Breite, Höhe50 Einheiten. Daher füllt er den gesamten Ansichtsbereich (ViewBox) aus (nicht den Ansichtsbereich (Viewport)).

Wenn das Symbol meet verwendet wird, wird der Ansichtsbereich (ViewBox) entlang der Y-Achse skaliert, da sein Breitenausmaß kleiner ist. Dies bedeutet, dass der Ansichtsbereich (ViewBox) den gesamten Ansichtsbereich (Viewport) entlang der Y-Achse (vertikal) füllt, aber nur entlang der X-Achse (horizontal) füllt2 * 50 Pixel= 100 Pixel (Verhältnis*Ansichtsbereich (ViewBox) X-Größe）。Da die Breite des Ansichtsbereichs (Viewport)500 Pixel, daher müssen Sie angeben, wie der Ansichtsbereich (ViewBox) im Ansichtsbereich (Viewport) horizontal ausgerichtet wird. Dies wird durch die Werte xMin, xMid und xMax im ersten Teil des Attributes preserveAspectRatio erreicht.

Hier sind drei Bilder, die die Verwendung von xMinYMin meet, xMidYmin meet und xMaxYmin meet im Attribut preserveAspectRatio in den obigen Beispielen darstellen. Beachten Sie, wie der Ansichtsbereich (ViewBox) mit dem linken, mittleren und rechten Rand ausgerichtet wird (je nach Einstellung).

Gleichzeitig muss, wenn das Verhältnis von Breite zu Höhe des Bildes entlang des X-Bereichs kleiner ist als entlang des Y-Bereichs, eine horizontale Ausrichtung angegeben werden.

Dies ist ein früheres Beispiel, aber jetzt mit width100 und height200：

Der Größe des Ansichtsbereichs (ViewBox) sind gleich, daher wird das Breitenausmaß entlang des Y-Bereichs (200/50 = 4） größer als das Breitenausmaß entlang des X-Bereichs (100/50 = 2）。Daher wird der Ansichtsbereich (ViewBox) im X-Bereich und nicht im Y-Bereich gefüllt. Dies erfordert, dass der Ansichtsbereich (ViewBox) horizontal ausgerichtet wird.

<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMin meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMid meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

Dies sind drei Bilder, jedes zeigt eine mögliche y-Ausrichtung mit dem Subelementswert: YMin, YMid und YMax: