viewBox

Das Attribut viewBox definiert die Position und Dimension eines SVG-Viewports im Benutzerspace.

Der Wert des viewBox-Attributs ist eine Liste von vier Zahlen, die durch Leerzeichen und/oder Komma getrennt sind: min-x, min-y, width und height. min-x und min-y repräsentieren die kleinsten X- und Y-Koordinaten, die das viewBox haben kann (die Ursprungskoordinaten des viewBox), und width und height spezifizieren die Größe des viewBox. Das resultierende viewBox ist ein Rechteck im Benutzerspace, das auf die Grenzen des Viewports eines SVG-Elements (nicht den Browser-Viewport) abgebildet wird. Wenn ein SVG ein viewBox-Attribut enthält (oft in Kombination mit einem preserveAspectRatio-Attribut), transformiert es den SVG-Viewport, um in ein bestimmtes Containerelement zu passen.

Elemente

Sie können dieses Attribut mit den im folgenden Abschnitt beschriebenen SVG-Elementen verwenden.

`<marker>`

Für <marker> definiert viewBox die Position und Dimension für den Inhalt des <marker>-Elements.

Wert	<number>,? <number>,? <number>,? <number>
Standardwert	none
Animierbar	Ja

`<pattern>`

Für <pattern> definiert viewBox die Position und Dimension für den Inhalt der Musterkachel.

Wert	<number>,? <number>,? <number>,? <number>
Standardwert	none
Animierbar	Ja

`<svg>`

Für <svg> definiert viewBox die Position und Dimension für den Inhalt des <svg>-Elements.

Wert	<number>,? <number>,? <number>,? <number>
Standardwert	none
Animierbar	Ja

`<symbol>`

Für <symbol> definiert viewBox die Position und Dimension für den Inhalt des <symbol>-Elements.

Wert	<number>,? <number>,? <number>,? <number>
Standardwert	none
Animierbar	Ja

`<view>`

Für <view> definiert viewBox die Position und Dimension für den Inhalt des <view>-Elements.

Wert	<number>,? <number>,? <number>,? <number>
Standardwert	none
Animierbar	Ja

Beispiele

html,
body,
svg {
  height: 100%;
  vertical-align: top;
}
svg:not(:root) {
  display: inline-block;
}

Der folgende Codeausschnitt enthält drei <svg>-Elemente mit verschiedenen viewBox-Attributwerten und identischen <rect>- und <circle>-Nachkommen, die sehr unterschiedliche Ergebnisse erzeugen. Die Größe von <rect> wird mit relativen Einheiten definiert, sodass die visuelle Größe des erzeugten Quadrats unabhängig vom viewBox-Wert unverändert aussieht. Das Radiuslängen-Attribut r des <circle> ist in jedem Fall dasselbe, aber dieser Benutzer-Unit-Wert wird relativ zur im viewBox definierten Größe aufgelöst und erzeugt in jedem Fall unterschiedliche Ergebnisse.

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

Die Benutzereinheiten von r="4" werden gegen die viewBox-Größen aufgelöst und erzeugen dramatisch unterschiedliche Kreisgrößen. Die genaue Wirkung des viewBox-Attributs wird durch das Attribut preserveAspectRatio beeinflusst.

Hinweis: Werte für width oder height, die kleiner oder gleich 0 sind, deaktivieren das Rendering des Elements.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute