Grundlegendes zum Viewbox-Attribut in SVG

Ein Webdesign-Handbuch zur Verwendung von 'SVG' Viewbox (HTML)

Viewbox ist ein Attribut, das häufig beim Erstellen von SVG-Formen verwendet wird. Wenn Sie das Dokument als Zeichenfläche betrachten, ist das Ansichtsfeld Teil der Zeichenfläche, die der Betrachter sehen soll. Obwohl die Seite möglicherweise den gesamten Computerbildschirm abdeckt, ist die Abbildung möglicherweise nur in einem Drittel des gesamten Bildschirms vorhanden.

Mit Viewbox können Sie den Parser anweisen, auf dieses Drittel zu zoomen. Es beseitigt den zusätzlichen Leerraum. Stellen Sie sich viewbox als virtuellen Ansatz zum Zuschneiden eines Bildes vor. Ohne sie erscheint Ihre Grafik ein Drittel ihrer tatsächlichen Größe.

Viewbox-Werte

Um ein Bild zuzuschneiden, müssen Sie Punkte auf dem Bild erstellen, um die Schnitte auszuführen. Dasselbe gilt, wenn Sie das Attribut "Ansichtsfeld" verwenden. Die Werteinstellungen für die Viewbox umfassen:

  • minx - die anfängliche x-Koordinate
  • miny - der Anfang und die Koordinate
  • width - Breite der Viewbox
  • height - Höhe der Viewbox

Die Syntax für Anzeigefeldwerte lautet:

viewBox = "0 0 200 150"

Verwechseln Sie nicht die Breite und Höhe des Ansichtsfelds 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 abdecken.

Dieses Ansichtsfeld deckt die gesamte Seite ab.

Dieses Ansichtsfeld umfasst die Hälfte der Seite, beginnend in der oberen rechten Ecke.

Ihre Form hat auch Höhen- und Breitenzuweisungen.

Es handelt sich um ein Dokument, das 800 x 400 Pixel mit einem Ansichtsfeld abdeckt, das in der oberen rechten Ecke beginnt und die Hälfte der Seite erweitert. Die Form ist ein Rechteck, das in der oberen rechten Ecke des Ansichtsfelds beginnt und 100 px nach links und 50 px nach unten verschoben wird.

Warum eine Viewbox einrichten?

SVG kann viel mehr als nur eine Form zeichnen. SVG kann im Webdesign verwendet werden. Es kann eine Figur über der anderen für einen Schatteneffekt erzeugt werden. Es kann eine Form so transformieren, dass sie in eine Richtung geneigt wird. Für die erweiterten Filter müssen Sie das viewbox-Attribut verstehen und verwenden.