SVGMarkerElement.markerUnits — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.markerUnits

Beschreibung

Die Eigenschaft markerUnits der Schnittstelle SVGMarkerElement gibt den Inhalt des SVG-Attributs markerUnits als SVGAnimatedEnumeration zurück. Das Attribut legt fest, auf welches Koordinatensystem sich markerWidth, markerHeight und der Inhalt des Markers beziehen.

Es gibt zwei gültige Werte, die als numerische Konstanten auf SVGMarkerElement bereitstehen:

SVG_MARKERUNITS_UNKNOWN (0): Wert ist keiner der vordefinierten Typen.
SVG_MARKERUNITS_USERSPACEONUSE (1): entspricht markerUnits="userSpaceOnUse". Der Marker nutzt das Benutzerkoordinatensystem des Elements, das ihn referenziert. Seine Größe hängt nicht von der Strichstärke ab.
SVG_MARKERUNITS_STROKEWIDTH (2): entspricht markerUnits="strokeWidth" (Standard). Der Marker wird mit der stroke-width des referenzierenden Pfads skaliert.

Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über markerUnits.baseVal ändern. markerUnits.animVal liefert den aktuellen, ggf. durch SMIL-Animation veränderten Wert. Nützlich ist die Eigenschaft, wenn man z. B. Pfeilspitzen unabhängig von der Linienstärke konstant groß halten oder Marker-Konfigurationen per Skript auslesen möchte.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal (beschreibbarer Grundwert, number) und animVal (schreibgeschützter, animierter Wert, number). Die Zahlen entsprechen den Konstanten SVG_MARKERUNITS_*.

Beispiele

Marker-Einheit auslesen

// <svg><defs><marker id="pfeil" markerUnits="userSpaceOnUse" ...></marker></defs></svg>
const marker = document.getElementById('pfeil');
const { baseVal } = marker.markerUnits;

const namen = {
  [SVGMarkerElement.SVG_MARKERUNITS_UNKNOWN]: 'unknown',
  [SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE]: 'userSpaceOnUse',
  [SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH]: 'strokeWidth'
};

console.log(baseVal, namen[baseVal]);

1 userSpaceOnUse

Standardwert ohne gesetztes Attribut

const svgNS = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(svgNS, 'marker');

// Kein markerUnits-Attribut gesetzt → Standard strokeWidth
console.log(marker.markerUnits.baseVal === SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH);

true

Pfeilspitzen unabhängig von der Linienstärke machen

// Alle Marker im Dokument auf userSpaceOnUse umstellen,
// damit dicke Linien keine riesigen Pfeilspitzen bekommen
const marker = document.querySelectorAll('marker');

for (const m of marker) {
  if (m.markerUnits.baseVal !== SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE) {
    m.markerUnits.baseVal = SVGMarkerElement.SVG_MARKERUNITS_USERSPACEONUSE;
  }
}

console.log(document.querySelector('marker')?.getAttribute('markerUnits'));

userSpaceOnUse

// Wichtig · Fallstricke

Schreibgeschützt ist nur die Eigenschaft selbst: marker.markerUnits = 1 hat keine Wirkung (im Strict Mode wird ein TypeError geworfen). Ändern Sie stattdessen marker.markerUnits.baseVal. Das aktualisiert auch das Attribut im DOM.
Wenn Sie baseVal auf 0 (SVG_MARKERUNITS_UNKNOWN) oder einen ungültigen Wert setzen, wird laut SVG 2 ein TypeError geworfen. Ältere Browser verhalten sich hier teilweise anders.
Die Werte sind Zahlen, keine Zeichenketten. Für den Klartext lesen Sie getAttribute('markerUnits') aus.
Bei strokeWidth wird der Marker samt markerWidth/markerHeight mit der Strichstärke multipliziert. Das ist ein häufiger Grund für unerwartet große Pfeilspitzen.
Die Eigenschaft wird von allen modernen Browsern seit Langem unterstützt. Das Element muss mit createElementNS im SVG-Namensraum erzeugt werden, sonst gibt es markerUnits nicht.

Siehe auch

SVGMarkerElement SVGAnimatedEnumeration SVGMarkerElement.markerWidth SVGMarkerElement.markerHeight SVGMarkerElement.orientType Document.createElementNS() SVGImageElement.crossOrigin