Signatur
Beschreibung
baseVal ist eine schreibgeschützte Eigenschaft von SVGAnimatedPreserveAspectRatio. Sie gibt ein SVGPreserveAspectRatio-Objekt zurück, das den Basiswert des Attributs preserveAspectRatio darstellt. Das ist der Wert, der im Markup steht oder per Skript gesetzt wurde, ohne Einfluss laufender SMIL-Animationen. Erreichbar ist die Eigenschaft über die preserveAspectRatio-Eigenschaft von Elementen wie <svg>, <image>, <symbol>, <pattern>, <marker>, <view> und <feImage>.
Schreibgeschützt ist nur die Referenz selbst. Sie können baseVal also kein neues Objekt zuweisen. Die Eigenschaften des zurückgegebenen Objekts lassen sich dagegen ändern:
align: numerische Konstante für die Ausrichtung, z. B.SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID(6) oder..._NONE(1).meetOrSlice:SVG_MEETORSLICE_MEET(1) oderSVG_MEETORSLICE_SLICE(2).
Änderungen an diesen Eigenschaften werden sofort in das DOM-Attribut übernommen und umgekehrt. Nutzen Sie baseVal, wenn Sie das Skalierungsverhalten einer Grafik zur Laufzeit strukturiert auslesen oder ändern möchten, ohne Attribut-Strings selbst zu zerlegen.
Rückgabewert
align und meetOrSlice (jeweils number). Fehlt das Attribut, entspricht der Wert dem Standard xMidYMid meet (align = 6, meetOrSlice = 1).Beispiele
Basiswert eines <svg>-Elements auslesen
// <svg id="logo" viewBox="0 0 100 50" preserveAspectRatio="xMinYMax slice"></svg>
const svg = document.getElementById('logo');
const par = svg.preserveAspectRatio.baseVal;
console.log(par.align); // Ausrichtung als Zahl
console.log(par.meetOrSlice); // meet/slice als Zahl
console.log(par.align === SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX);Zahlencodes in lesbaren Attributwert umwandeln
const ALIGN = ['unknown', 'none', 'xMinYMin', 'xMidYMin', 'xMaxYMin',
'xMinYMid', 'xMidYMid', 'xMaxYMid', 'xMinYMax', 'xMidYMax', 'xMaxYMax'];
const MOS = ['unknown', 'meet', 'slice'];
const describe = (el) => {
const { align, meetOrSlice } = el.preserveAspectRatio.baseVal;
return align === 1 ? 'none' : `${ALIGN[align]} ${MOS[meetOrSlice]}`;
};
// Element ohne Attribut liefert den Standardwert
const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
console.log(describe(img));Skalierung per Schalter zwischen „einpassen“ und „füllen“ umschalten
const svg = document.querySelector('svg.hero');
const button = document.querySelector('#toggle-fit');
button.addEventListener('click', () => {
const par = svg.preserveAspectRatio.baseVal;
par.meetOrSlice = par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET
? SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE
: SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET;
// Die Änderung landet direkt im Attribut
console.log(svg.getAttribute('preserveAspectRatio'));
});// Wichtig · Fallstricke
- Keine Neuzuweisung:
el.preserveAspectRatio.baseVal = …hat keine Wirkung und löst im Strict Mode einenTypeErroraus. Ändern Sie stattdessenalignbzw.meetOrSliceoder setzen Sie das Attribut mitsetAttribute(). - UNKNOWN-Werte: Wenn Sie
alignodermeetOrSliceauf0(…_UNKNOWN) setzen, wird eine Ausnahme ausgelöst. - Bei
align = NONE(1) ignoriert der BrowsermeetOrSlice, und die Grafik wird verzerrt auf die Zielgröße gestreckt. - baseVal oder animVal: Läuft eine SMIL-Animation (
<animate attributeName="preserveAspectRatio">), zeigt nuranimValden aktuell dargestellten Wert.baseValbleibt unverändert. - Die Eigenschaft wirkt nur, wenn ein
viewBoxgesetzt ist (bei<image>zählt das Seitenverhältnis des Bildes). OhneviewBoxhat eine Änderung keine sichtbare Wirkung. - Die Eigenschaft wird in allen modernen Browsern unterstützt. Die Konstanten sind sowohl über
SVGPreserveAspectRatioals auch über das Objekt selbst erreichbar.