SVGPreserveAspectRatio.meetOrSlice — Eigenschaft · JavaScript-Referenz

Signatur

SVGPreserveAspectRatio.meetOrSlice

Beschreibung

Die Eigenschaft meetOrSlice eines SVGPreserveAspectRatio-Objekts gibt an, wie ein SVG-Inhalt mit viewBox in seinen Darstellungsbereich (Viewport) eingepasst wird. Der Wert entspricht dem zweiten Teil des Attributs preserveAspectRatio, also meet oder slice, und wird als Zahl zurückgegeben:

SVGPreserveAspectRatio.SVG_MEETORSLICE_UNKNOWN (0): unbekannter bzw. ungültiger Wert
SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET (1): Der ganze Inhalt bleibt sichtbar und wird so weit skaliert, dass er vollständig hineinpasst. Dabei können leere Ränder entstehen, ähnlich wie bei object-fit: contain.
SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE (2): Der Viewport wird vollständig ausgefüllt. Überstehende Teile werden abgeschnitten, ähnlich wie bei object-fit: cover.

Das Objekt bekommt man nicht direkt, sondern über die animierbare Eigenschaft preserveAspectRatio eines Elements, etwa von <svg>, <image>, <pattern>, <marker>, <symbol>, <view> oder <feImage>. Dabei steht baseVal für den im Attribut gespeicherten Wert, animVal für den aktuell animierten Wert, der nur gelesen werden kann.

Ein Schreibzugriff auf baseVal.meetOrSlice ändert sofort das Attribut preserveAspectRatio im DOM. So lässt sich der Skalierungsmodus zur Laufzeit umschalten, ohne den Attribut-String selbst zusammenzusetzen und zu parsen.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Setzen: eine der Konstanten `SVG_MEETORSLICE_MEET` (`1`) oder `SVG_MEETORSLICE_SLICE` (`2`). Sie wird nur auf `baseVal` übernommen.

Rückgabewert

Typ

number

Beschreibung

Eine vorzeichenlose Ganzzahl (unsigned short): 0 (unbekannt), 1 (meet) oder 2 (slice). Fehlt die Angabe im Attribut, ist der Standardwert 1 (meet).

Beispiele

Aktuellen Skalierungsmodus auslesen

// <svg id="logo" viewBox="0 0 100 50" preserveAspectRatio="xMidYMid slice">
const svg = document.getElementById('logo');
const par = svg.preserveAspectRatio.baseVal;

const namen = {
  [SVGPreserveAspectRatio.SVG_MEETORSLICE_UNKNOWN]: 'unknown',
  [SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET]: 'meet',
  [SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE]: 'slice'
};

console.log(par.meetOrSlice, namen[par.meetOrSlice]);

2 slice

Zwischen „contain“ und „cover“ umschalten

// Umschalter für ein Hintergrundbild in einem SVG-Banner
const image = document.querySelector('#banner image');
const button = document.querySelector('#toggle-fit');

button.addEventListener('click', () => {
  const par = image.preserveAspectRatio.baseVal;
  par.meetOrSlice = par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE
    ? SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET
    : SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE;

  // Das Attribut wird automatisch aktualisiert
  console.log(image.getAttribute('preserveAspectRatio'));
});

xMidYMid slice (nach dem ersten Klick, wenn vorher kein Attribut gesetzt war)

Standardwert bei fehlendem Attribut und Zusammenspiel mit align

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 10 10');

const par = svg.preserveAspectRatio.baseVal;
console.log(par.meetOrSlice); // Standard: meet

svg.setAttribute('preserveAspectRatio', 'none');
// Bei align = none spielt meetOrSlice keine Rolle mehr
console.log(par.align === SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE, par.meetOrSlice);

1 true 1

// Wichtig · Fallstricke

Ohne Wirkung bei align = none: Steht align auf SVG_PRESERVEASPECTRATIO_NONE, wird der Inhalt ohne Rücksicht auf das Seitenverhältnis gestreckt. meetOrSlice wird dann ignoriert.
Ohne Wirkung ohne viewBox: Fehlt auf <svg>, <symbol> oder <marker> eine viewBox, hat preserveAspectRatio dort keinen Effekt. Bei <image> ist keine viewBox nötig.
Nur baseVal ist beschreibbar: Ein Schreibversuch auf animVal.meetOrSlice löst einen NoModificationAllowedError aus.
Ungültige Werte: Wird 0 (SVG_MEETORSLICE_UNKNOWN) oder eine unbekannte Zahl zugewiesen, werfen Browser eine Ausnahme (je nach Spezifikationsstand NotSupportedError oder TypeError). Verwende daher immer die benannten Konstanten statt fester Zahlen.
Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen gängigen Browsern unterstützt. Weil die SVG-DOM-Schnittstellen eher wenig beachtet werden, lohnt sich in exotischen Umgebungen (z. B. jsdom) ein kurzer Funktionstest.

Siehe auch

SVGPreserveAspectRatio SVGPreserveAspectRatio.align SVGAnimatedPreserveAspectRatio SVGSVGElement.preserveAspectRatio SVGImageElement.preserveAspectRatio SVGSVGElement.viewBox ResizeObserverEntry.borderBoxSize