SVG/Attribut/viewBox

Das viewBox-Attribut legt ein neues Koordinatensystem fest, das innerhalb des verfügbaren Viewports beliebig skaliert, verschoben und beschnitten werden kann.

Erlaubte Werte

4 Zahlen

• x-Koordinate links
• y-Koordinate oben
• Breite (>0)
• Höhe (>0)

Standardwert

-

anwendbar auf

svg, symbol, image, marker, pattern, view,

Präsentationsattribut

nein

mit CSS animierbar

nein

Beispiel

<svg viewBox="-100 -100 200 200">
  <circle id="clockface" r="98" />
  <circle id="origin"    r="2" />
</svg>

Die SVG-Uhr erhält eine um 100 (dimensionslose Einheiten) verschobene ViewBox, damit spätere CSS-Animationen vereinfacht werden.

Beachten Sie: Im XML-Kontext wird das Attribut in CamelCase geschrieben, HTML5 ist case-insensitiv.

Für Breite und Höhe gilt: Bei 0 wird das Element nicht dargestellt. Ein negativer Wert macht das ganze Attribut ungültig.

Das viewBox-Attribut ist zwar mit SMIL animierbar, aber nicht mit CSS, da es (noch) kein Präsentationsattribut ist.

Empfehlung: Es ist möglich, sehr kleine Werte für die viewBox zu verwenden (viewBox="0 0 1 1"). Dies kann aber bei Skalierungen und Aufrufen mit use zu Rundungsfehlern führen, die im schlimmesten Fall dazu führen, dass die Grafik nicht dargestellt wird.

Siehe auch

• SVG/Tutorials/Einstieg/SVG in responsiven Webseiten

Weblinks

• Spezifikation (W3C): viewBox Attribute