SVGSVGElement: viewBox-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die viewBox-Eigenschaft der SVGSVGElement-Schnittstelle, welche schreibgeschützt ist, spiegelt das <svg>-Elementattribut viewBox als SVGAnimatedRect wider.
Die Eigenschaft beschreibt das viewBox-Attribut des <svg>-Elements, das verwendet wird, um die x-Koordinate, y-Koordinate, Breite und Höhe eines <svg>-Elements zu definieren. Die Eigenschaften SVGAnimatedRect.baseVal und SVGAnimatedRect.animVal sind beide SVGRect-Objekte oder null, falls viewBox nicht definiert ist. Die Komponenten dieser Objekte können sich von den Eigenschaften SVGSVGElement.x, SVGSVGElement.y, SVGSVGElement.width und SVGSVGElement.height unterscheiden, da die Attribute x, y, width und height Vorrang vor dem viewBox-Attribut haben.
Für nicht-verschachtelte SVG-Elemente haben die Werte der CSS-Eigenschaften x, y, width und height Vorrang vor irgendwelchen Elementattributen, sodass die durch viewBox definierten Werte möglicherweise nicht im Erscheinungsbild des Elements widergespiegelt werden.
Wert
Ein SVGAnimatedRect.
Beispiel
Angenommen, das folgende SVG-Öffnungstag:
<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
Wir können die viewBox-Werte abrufen, aber sie unterscheiden sich von den Eigenschaften x, y, width und height:
const svg = document.querySelector("svg");
const vBox = svg.viewBox;
// The SVGSVGElement viewBox property
console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
console.log(vBox.baseVal.x); // -12
console.log(vBox.baseVal.y); // -18
console.log(vBox.baseVal.width); // 200
console.log(vBox.baseVal.height); // 300
// Other SVGSVGElement properties
console.log(svg.x); // 5
console.log(svg.y); // 5
console.log(svg.width); // 400
console.log(svg.height); // 600
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |