SVGViewElement: 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 SVGViewElement-Schnittstelle ist eine schreibgeschützte Eigenschaft, die das viewBox-Attribut des angegebenen <view>-Elements widerspiegelt. Sie repräsentiert die x-, y-, width- und height-Werte, die den Bereich definieren, der für das view-Element's viewBox verwendet werden soll.
Wert
Ein SVGAnimatedRect-Objekt.
Beispiel
Angenommen, wir haben folgendes SVG, können wir die viewBox-Eigenschaft verwenden, um die Abmessungen des viewBox für ein view-Element abzurufen:
html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<view id="view1" viewBox="0 0 50 50"></view>
<circle cx="100" cy="100" r="80" fill="blue" />
</svg>
Wir können auf das viewBox-Attribut zugreifen:
js
const view = document.querySelector("view");
console.log(view.viewBox.baseVal); // output: DOMRect {x: 0, y: 0, width: 50, height: 50}
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |
Browser-Kompatibilität
Loading…