viewBox

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

Der Wert des viewBox-Attributs ist eine Liste von vier durch Leerzeichen und/oder Komma getrennten Zahlen: 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 Ursprungspunkte des viewBox), und width und height geben die Größe des viewBox an. Das resultierende viewBox ist ein rechteckiger Bereich im Benutzerraum, der auf die Grenzen des Viewports eines SVG-Elements abgebildet wird (nicht der Browser-Viewport). Wenn ein SVG ein viewBox-Attribut enthält (oft in Kombination mit einem preserveAspectRatio-Attribut), streckt oder skaliert eine Transformation den SVG-Viewport, um in ein bestimmtes Containerelement zu passen.

Elemente

Sie können dieses Attribut mit den unten beschriebenen SVG-Elementen verwenden.

`<marker>`

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

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

`<pattern>`

Für <pattern> definiert viewBox die Position und Dimension des Inhalts des Mustertiles.

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

`<svg>`

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

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

`<symbol>`

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

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

`<view>`

Für <view> definiert viewBox die Position und Dimension des Inhalts 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 Codeauszug enthält drei <svg>s mit unterschiedlichen viewBox-Attributwerten und identischen <rect> und <circle> Nachfahren, die sehr unterschiedliche Ergebnisse erzeugen. Die Größe von <rect> wird mit relativen Einheiten definiert, daher sieht die visuelle Größe des erzeugten Quadrats unabhängig vom viewBox-Wert unverändert aus. Das Radiuslängenattribut r des <circle> ist in jedem Fall gleich, aber dieser Wert der Benutzereinheit wird gegen die im viewBox definierte Größe aufgelöst und führt zu unterschiedlichen Ergebnissen in jedem Fall.

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 Auswirkung des viewBox-Attributs wird durch das preserveAspectRatio-Attribut beeinflusst.

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute