SVGViewElement: preserveAspectRatio-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die preserveAspectRatio-Eigenschaft der SVGViewElement-Schnittstelle ist eine schreibgeschützte Eigenschaft, die das preserveAspectRatio-Attribut des gegebenen <view>-Elements widerspiegelt. Sie definiert, wie der Inhalt innerhalb des view skaliert werden soll, um in das Ansichtsfenster zu passen, während sein Seitenverhältnis beibehalten wird.

Wert

Ein SVGAnimatedPreserveAspectRatio-Objekt.

Beispiel

Angenommen, wir haben das folgende SVG. Wir können die preserveAspectRatio-Eigenschaft verwenden, um das Skalierungsverhalten für ein view-Element abzurufen:

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <view id="view1" preserveAspectRatio="xMidYMid meet"></view>
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

Wir können auf das preserveAspectRatio-Attribut zugreifen:

const view = document.querySelector("view");

console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__preserveAspectRatio

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

preserveAspectRatio