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>
<pattern>
<svg>
<symbol>
<view>
Beispiele
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.
<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 |