viewbox

[Gunnar Bittersmann]

@@Gaby

Warum muss hier

<svg width="300" height="200" viewbox="0 0 3 2">

in der viewbxox . . 3 2 angegeben werden, damit das Bild die Größe 300/200 annimmt?

Muss man nicht. Die Größe der Darstellung wird durch width="300" height="200" festgelegt.

Die Angaben in viewBox (CamelCase^[1]) geben ein inneres Koordinatensystem an. Die Angaben

  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />

  <rect x="1" y="0" width="1" height="2" fill="white" />

  <rect x="2" y="0" width="1" height="2" fill="#EF4531" />  

beziehen sich auf dieses Koordinatensystem.

Das letzte der Rechtecke bspw. hat seine linke obere Ecke bei zwei Drittel der Breite (x="2", ViewBox geht von 0 bis 3) am oberen Rand (y="0", ViewBox geht von 0 bis 2), hat die Breite von von einem Drittel der ViewBox-Breite (width="1", ViewBox-Breite ist 3) und füllt die volle Höhe aus height="2", ViewBox-Höhe ist 2). Das Rechteck füllt also das rechte Drittel der Grafik aus.

LLAP 🖖

---

1. wenn SVG nicht gerade in den HTML-Kontext gebracht wird; XML ist case-sensitiv ↩︎