Viewbox ist ein Attribut, das häufig beim Erstellen von SVG-Shapes verwendet wird. Wenn Sie sich das Dokument als Leinwand vorstellen, ist das Ansichtsfeld Teil der Leinwand, die der Betrachter sehen soll. Auch wenn die Seite möglicherweise den gesamten Computerbildschirm abdeckt, kann die Abbildung nur in einem Drittel des gesamten Bildschirms vorhanden sein.
Mit Viewbox können Sie dem Parser mitteilen, dass er diesen dritten vergrößern soll. Dadurch entfällt der zusätzliche Leerraum. Stellen Sie sich View-Box als einen virtuellen Ansatz vor, um ein Bild zuzuschneiden. Andernfalls erscheint Ihre Grafik um ein Drittel ihrer tatsächlichen Größe.
Viewbox-Werte
Um ein Bild zuzuschneiden, müssen Sie Punkte auf dem Bild erstellen, um die Schnitte durchzuführen. Das Gleiche gilt, wenn Sie das View-Box-Attribut verwenden. Die Werteinstellungen für viewbox umfassen:
minx- die x-Koordinate am Anfangminy- die AnfangskoordinateBreite- Breite der ViewboxHöhe- Höhe der Viewbox
Die Syntax für Viewbox-Werte lautet:
viewBox = "0 0 200 150"
Verwechseln Sie die Breite und Höhe des Ansichtsfelds nicht mit der Breite und Höhe, die Sie für das SVG-Dokument festgelegt haben. Wenn Sie eine SVG-Datei erstellen, ist einer der ersten Werte, die Sie festlegen, die Breite und Höhe des Dokuments. Das Dokument ist eine Leinwand. Das Ansichtsfeld kann die gesamte Leinwand oder nur einen Teil davon umfassen.
Dieses Ansichtsfeld deckt die gesamte Seite ab.
Dieses Ansichtsfeld deckt die Hälfte der Seite ab, die in der oberen rechten Ecke beginnt.
Ihre Form hat auch Höhen- und Breitenzuweisungen.
Es ist ein Dokument, das 800 x 400 Pixel mit einer Viewbox umfasst, die in der rechten oberen Ecke beginnt und die Hälfte der Seite erweitert. Die Form ist ein Rechteck, das in der rechten oberen Ecke des Ansichtsfelds beginnt und um 100 px nach links und 50 px nach unten verschoben wird.
Warum eine Viewbox einstellen?
SVG kann viel mehr als nur eine Form zeichnen. Es kann eine Figur übereinander für einen Schatteneffekt erzeugen. Es kann eine Form so transformieren, dass sie in eine Richtung kippt. Für die erweiterten Filter müssen Sie das Ansichtsfeldattribut verstehen und verwenden.
