SVGMarkerElement.preserveAspectRatio — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.preserveAspectRatio

Beschreibung

Die Eigenschaft preserveAspectRatio des Interfaces SVGMarkerElement gibt ein SVGAnimatedPreserveAspectRatio-Objekt zurück. Es enthält den Wert des Attributs preserveAspectRatio eines <marker>-Elements. Das Attribut legt fest, wie der Inhalt des Markers (definiert über viewBox) in die durch markerWidth und markerHeight vorgegebene Fläche eingepasst wird.

Das zurückgegebene Objekt hat zwei Eigenschaften:

baseVal: ein SVGPreserveAspectRatio mit dem statischen Attributwert. Seine Eigenschaften align und meetOrSlice sind beschreibbar.
animVal: ein SVGPreserveAspectRatio mit dem aktuellen, eventuell durch SMIL-Animation veränderten Wert. Er ist nur lesbar.

Die Eigenschaft selbst ist schreibgeschützt. Das Objekt kannst du nicht ersetzen, wohl aber über baseVal.align und baseVal.meetOrSlice ändern. align und meetOrSlice sind numerische Konstanten wie SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID oder SVG_MEETORSLICE_MEET. Brauchst du das nur selten, ist setAttribute('preserveAspectRatio', …) oft die einfachere Wahl.

Rückgabewert

Typ

SVGAnimatedPreserveAspectRatio

Beschreibung

Objekt mit baseVal (Grundwert) und animVal (animierter Wert), jeweils vom Typ SVGPreserveAspectRatio. Fehlt das Attribut, gilt der Standardwert xMidYMid meet.

Beispiele

Ausrichtung eines Markers auslesen

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

const par = marker.preserveAspectRatio.baseVal;
console.log(par.align === SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX);
console.log(par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE);

true true

Standardwert ohne gesetztes Attribut

const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
const { align, meetOrSlice } = marker.preserveAspectRatio.baseVal;

// 6 = XMIDYMID, 1 = MEET
console.log(align, meetOrSlice);

6 1

Pfeilspitze nachträglich ohne Verzerrung einpassen

// Voraussetzung: <marker id="arrow" viewBox="0 0 10 6" markerWidth="10" markerHeight="10" preserveAspectRatio="none"> im Dokument
const arrow = document.querySelector('#arrow');
const base = arrow.preserveAspectRatio.baseVal;

base.align = SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
base.meetOrSlice = SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET;

console.log(arrow.getAttribute('preserveAspectRatio'));

xMidYMid meet

Neuen Wert zuweisen schlägt fehl

'use strict';
const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
try {
  marker.preserveAspectRatio = 'none';
} catch (err) {
  console.log(err instanceof TypeError); // Getter-only-Eigenschaft
}

true

// Wichtig · Fallstricke

Schreibgeschützt: Wenn du der Eigenschaft direkt etwas zuweist, passiert im Sloppy-Modus einfach nichts. Im Strict Mode wird ein TypeError ausgelöst. Ändern kannst du den Wert nur über baseVal.align/baseVal.meetOrSlice oder setAttribute().
Nur mit viewBox wirksam: Hat der Marker kein viewBox-Attribut, wird preserveAspectRatio ignoriert.
animVal ist nur lesbar: Ein Schreibversuch löst einen Fehler aus (NoModificationAllowedError).
Die Werte SVG_PRESERVEASPECTRATIO_UNKNOWN (0) und SVG_MEETORSLICE_UNKNOWN (0) dürfen nicht zugewiesen werden. Das führt zu einem Fehler.
Elemente per createElementNS() mit dem SVG-Namensraum erzeugen. createElement('marker') liefert kein SVGMarkerElement.
Browser-Kompatibilität: Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

SVGMarkerElement SVGAnimatedPreserveAspectRatio SVGPreserveAspectRatio SVGMarkerElement.viewBox SVGMarkerElement.markerWidth SVGSVGElement.preserveAspectRatio SVGMarkerElement.orient