SVGPatternElement: 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 SVGPatternElement-Schnittstelle ist eine schreibgeschützte Eigenschaft, die das preserveAspectRatio-Attribut des gegebenen Elements widerspiegelt. Sie definiert, wie der Inhalt des Musters in den gegebenen Raum skaliert werden soll, wobei das Seitenverhältnis beibehalten wird.

Wert

Ein SVGAnimatedPreserveAspectRatio-Objekt.

Beispiel

Für das folgende SVG können Sie die preserveAspectRatio-Eigenschaft nutzen, um das Skalierungsverhalten des Muster-Elements abzurufen:

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <pattern
      id="pattern1"
      width="10"
      height="10"
      preserveAspectRatio="xMidYMid meet">
      <circle cx="5" cy="5" r="5" fill="blue" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg>

Wir können auf das preserveAspectRatio-Attribut zugreifen:

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

console.log(pattern.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