SVGSVGElement: viewBox-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die schreibgeschützte viewBox-Eigenschaft der SVGSVGElement-Schnittstelle spiegelt das <svg>-Element-Attribut viewBox als ein 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, wenn der 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 jeglichen Element-Attributen, sodass die durch den viewBox definierten Werte möglicherweise nicht im Erscheinungsbild des Elements widergespiegelt werden.
Wert
Ein SVGAnimatedRect.
Beispiel
Geben Sie 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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |