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 <svg>-Element-Attribut <viewBox>, 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.
Bei nicht-verschachtelten SVG-Elementen haben die Werte der CSS-Eigenschaften x, y, width und height Vorrang vor allen Elementattributen, sodass die im viewBox definierten Werte möglicherweise nicht im Aussehen des Elements widergespiegelt werden.
Wert
Ein SVGAnimatedRect.
Beispiel
Bei folgendem SVG-Eröffnungstag:
<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
Können wir 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 |