SVGAnimatedPreserveAspectRatio.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedPreserveAspectRatio.animVal

Beschreibung

Die Eigenschaft animVal einer SVGAnimatedPreserveAspectRatio-Instanz gibt ein SVGPreserveAspectRatio-Objekt zurück. Es beschreibt den Wert des Attributs preserveAspectRatio so, wie er gerade tatsächlich wirksam ist, also einschließlich laufender SMIL-Animationen (z. B. <animate attributeName="preserveAspectRatio"> oder <set>).

Man erreicht die Eigenschaft über Elemente, die preserveAspectRatio unterstützen, etwa SVGSVGElement, SVGImageElement, SVGSymbolElement, SVGMarkerElement, SVGPatternElement, SVGViewElement oder SVGFEImageElement: element.preserveAspectRatio.animVal.

Das zurückgegebene Objekt besitzt die Eigenschaften align (Ausrichtung, z. B. SVG_PRESERVEASPECTRATIO_XMIDYMID = 6) und meetOrSlice (SVG_MEETORSLICE_MEET = 1 oder SVG_MEETORSLICE_SLICE = 2). Es ist schreibgeschützt: Wer den Wert per Skript ändern möchte, verwendet baseVal oder setAttribute().

Typische Einsatzfälle sind das Auslesen des effektiven Skalierungsverhaltens, etwa um Koordinaten zwischen viewBox und Bildschirm korrekt umzurechnen, oder das Debugging von Animationen.

Rückgabewert

Typ

SVGPreserveAspectRatio

Beschreibung

Schreibgeschütztes Objekt mit den numerischen Eigenschaften align und meetOrSlice, das den aktuell wirksamen (animierten) Wert repräsentiert.

Beispiele

Aktuellen Wert eines SVG-Elements auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 100 50');
svg.setAttribute('preserveAspectRatio', 'xMinYMax slice');
document.body.append(svg);

const { align, meetOrSlice } = svg.preserveAspectRatio.animVal;
console.log(align, meetOrSlice);

8 2

Numerische Konstanten in lesbaren Text umwandeln

const ALIGN = ['unknown', 'none', 'xMinYMin', 'xMidYMin', 'xMaxYMin',
  'xMinYMid', 'xMidYMid', 'xMaxYMid', 'xMinYMax', 'xMidYMax', 'xMaxYMax'];
const MOS = ['unknown', 'meet', 'slice'];

const describePAR = (el) => {
  const par = el.preserveAspectRatio.animVal;
  return par.align === SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE
    ? 'none'
    : `${ALIGN[par.align]} ${MOS[par.meetOrSlice]}`;
};

const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
console.log(describePAR(img)); // Standardwert

xMidYMid meet

baseVal und animVal während einer SMIL-Animation vergleichen

document.body.insertAdjacentHTML('beforeend', `
  <svg id="logo" viewBox="0 0 100 50" width="300" height="300"
       preserveAspectRatio="xMidYMid meet">
    <set attributeName="preserveAspectRatio" to="xMaxYMax slice" begin="0s" dur="5s"/>
    <rect width="100" height="50" fill="teal"/>
  </svg>`);

const logo = document.getElementById('logo');
setTimeout(() => {
  const { baseVal, animVal } = logo.preserveAspectRatio;
  console.log('baseVal:', baseVal.align, baseVal.meetOrSlice);
  console.log('animVal:', animVal.align, animVal.meetOrSlice);
}, 500);

baseVal: 6 1 animVal: 10 2 (in Browsern, die animVal animiert aktualisieren; sonst 6 1)

// Wichtig · Fallstricke

Schreibgeschützt: Zuweisungen wie animVal.align = 1 werfen einen NoModificationAllowedError (bzw. werden ignoriert). Änderungen gehören an baseVal oder per setAttribute('preserveAspectRatio', …).
Animationen: Viele Browser (u. a. Chromium und Firefox) spiegeln SMIL-Animationen in animVal nicht zuverlässig wider – dort liefert animVal häufig denselben Wert wie baseVal. Für plattformübergreifenden Code nicht darauf verlassen.
Ungültige Attributwerte fallen auf den Standard xMidYMid meet zurück (align = 6, meetOrSlice = 1).
Ist align gleich SVG_PRESERVEASPECTRATIO_NONE (1), hat meetOrSlice keine Wirkung.
Die Eigenschaft existiert grundsätzlich in allen modernen Browsern; CSS-Eigenschaften wie object-fit wirken sich darauf nicht aus.

Siehe auch

SVGAnimatedPreserveAspectRatio SVGAnimatedPreserveAspectRatio.baseVal SVGPreserveAspectRatio SVGSVGElement SVGImageElement SVGAnimatedRect.animVal