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 Juli 2015.
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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |
Browser-Kompatibilität
Loading…