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

Der Wert desviewBox-Attributs ist eine Liste von vier Zahlen, die durch Leerzeichen und/oder Komma getrennt sind:min-x,min-y,width undheight.min-x undmin-y repräsentieren die kleinsten X- und Y-Koordinaten, die dasviewBox haben kann (die Ursprungskoordinaten desviewBox), undwidth undheight spezifizieren die Größe desviewBox. Das resultierendeviewBox ist ein Rechteck im Benutzerspace, das auf die Grenzen des Viewports eines SVG-Elements (nicht denBrowser-Viewport) abgebildet wird. Wenn ein SVG einviewBox-Attribut enthält (oft in Kombination mit einempreserveAspectRatio-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> definiertviewBox die Position und Dimension für den Inhalt des<marker>-Elements.

<pattern>

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

<svg>

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

<symbol>

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

<view>

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

Beispiele

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

Der folgende Codeausschnitt enthält drei<svg>-Elemente mit verschiedenenviewBox-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 vomviewBox-Wert unverändert aussieht. Das Radiuslängen-Attributr des<circle> ist in jedem Fall dasselbe, aber dieser Benutzer-Unit-Wert wird relativ zur imviewBox definierten Größe aufgelöst und erzeugt in jedem Fall unterschiedliche Ergebnisse.

<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 vonr="4" werden gegen dieviewBox-Größen aufgelöst und erzeugen dramatisch unterschiedliche Kreisgrößen. Die genaue Wirkung desviewBox-Attributs wird durch das AttributpreserveAspectRatio beeinflusst.

Spezifikationen