SVGAnimatedPreserveAspectRatio: animVal-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 schreibgeschützte Eigenschaft animVal der Schnittstelle SVGAnimatedPreserveAspectRatio repräsentiert den Wert des preserveAspectRatio-Attributs eines SVG-Elements, nachdem Animationen oder Transformationen angewendet wurden.

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 die Wirkung der Animation nach dem Ende der Animation bestehen bleibt.

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 beendet ist, werden wir Folgendes sehen:

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 vollständig entfernen, da "remove" der Standard ist), die Animationseffekte entfernt werden, wenn die Animation abgeschlossen ist, und animVal.meetOrSlice dann auf 1 zurückgesetzt wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGAnimatedPreserveAspectRatio__animVal

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch