SVGAnimatedPreserveAspectRatio: baseVal-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 baseVal-Schreibgeschützte Eigenschaft der SVGAnimatedPreserveAspectRatio-Schnittstelle repräsentiert den Basiswert (nicht animiert) des preserveAspectRatio-Attributs eines SVG-Elements.

Wert

Ein SVGPreserveAspectRatio-Objekt.

Beispiele

Betrachten Sie das folgende SVG:

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <image
    id="myImage"
    href="crows.jpg"
    width="50"
    height="50"
    preserveAspectRatio="xMinYMin meet">
    <animate
      attributeName="preserveAspectRatio"
      from="xMinYMin meet"
      to="xMaxYMax slice"
      dur="5s"
      fill="freeze"
      repeatCount="1" />
  </image>
</svg>

Dieses Beispiel definiert ein <image>-Element, das sein preserveAspectRatio-Attribut animiert. Die Animation läuft einmal und setzt das fill-Attribut auf "freeze", sodass der Effekt der Animation nach dem Abschluss der Animation beibehalten wird.

Wir führen den folgenden Code sofort aus, wenn die Seite geladen wird:

js
const image = document.querySelector("#myImage");
const baseVal = image.preserveAspectRatio.baseVal;
const animVal = image.preserveAspectRatio.animVal;

console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)

Wenn wir die Werte von animVal.meetOrSlice und baseVal.meetOrSlice erneut protokollieren, nachdem die Animation abgeschlossen ist, sehen wir Folgendes:

js
console.log(baseVal.meetOrSlice); // Output: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Output: 2 (SVG_MEETORSLICE_SLICE)

Beachten Sie, dass wenn wir fill auf "remove" setzen (oder fill ganz entfernen, da "remove" der Standard ist), die Animationseffekte entfernt werden, wenn die Animation abgeschlossen ist, und animVal.meetOrSlice dann wieder auf 1 zurückgeht.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGAnimatedPreserveAspectRatio__baseVal

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch