← 返回首页
SVGViewElement: viewBox-Eigenschaft - Web-APIs | MDN

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

SVGViewElement: 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 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.

In diesem Artikel

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

Spezifikation
Scalable Vector Graphics (SVG) 2
# __svg__SVGFitToViewBox__viewBox

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch