SVGMarkerElement.markerWidth — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.markerWidth

Beschreibung

Die Eigenschaft markerWidth eines <marker>-Elements gibt ein SVGAnimatedLength-Objekt zurück. Es steht für die Breite des Viewports, in den der Marker-Inhalt (z. B. eine Pfeilspitze) beim Zeichnen an Linien, Pfaden oder Polygonen eingepasst wird. Grundlage ist das SVG-Attribut markerWidth. Fehlt es, gilt der Standardwert 3.

Die Eigenschaft selbst ist schreibgeschützt, das Objekt dahinter nicht. Über markerWidth.baseVal bekommst du ein änderbares SVGLength, das dem Attributwert entspricht. markerWidth.animVal liefert den aktuellen, gegebenenfalls animierten Wert und lässt sich nur lesen. Mit baseVal.value (in Benutzereinheiten), baseVal.valueAsString oder baseVal.newValueSpecifiedUnits() kannst du die Breite per Skript auslesen oder ändern.

Wie der Wert zu deuten ist, hängt von markerUnits ab. Beim Standard strokeWidth wird die Breite mit der Strichstärke des Elements multipliziert, das den Marker nutzt. Bei userSpaceOnUse gilt sie direkt im Benutzerkoordinatensystem. Zusammen mit viewBox und preserveAspectRatio bestimmt markerWidth, wie stark der Marker-Inhalt skaliert wird.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (änderbares SVGLength, entspricht dem Attribut) und animVal (schreibgeschütztes SVGLength mit dem aktuellen, ggf. animierten Wert).

Beispiele

Breite eines Pfeil-Markers auslesen

// <svg><defs><marker id="pfeil" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7"/></marker></defs></svg>
const marker = document.getElementById('pfeil');
const breite = marker.markerWidth;

console.log(breite instanceof SVGAnimatedLength);
console.log(breite.baseVal.value);
console.log(breite.animVal.value);

true 10 10

Marker per Skript vergrößern

const marker = document.querySelector('marker#pfeil');

// baseVal ist änderbar – das Attribut wird automatisch angepasst
marker.markerWidth.baseVal.value = 20;
marker.markerHeight.baseVal.value = 14;

console.log(marker.getAttribute('markerWidth'));

20

Marker dynamisch erzeugen und Standardwert prüfen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(SVG_NS, 'defs'));

const marker = document.createElementNS(SVG_NS, 'marker');
marker.id = 'punkt';
defs.append(marker);

// Ohne Attribut gilt der Standardwert 3
console.log(marker.markerWidth.baseVal.value);

// Einheit explizit setzen (hier: Benutzereinheiten)
marker.markerWidth.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 8);
console.log(marker.markerWidth.baseVal.valueAsString);

3 8

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie marker.markerWidth = 10 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere stattdessen markerWidth.baseVal oder rufe setAttribute('markerWidth', …) auf.
animVal lässt sich nur lesen: Wer animVal.value setzen will, löst eine NoModificationAllowedError-Ausnahme aus.
Skalierung: Beim Standard markerUnits="strokeWidth" wächst der Marker mit der Strichstärke. Ein markerWidth von 10 bei stroke-width: 4 ergibt effektiv 40 Benutzereinheiten.
Werte 0 oder negativ: Bei 0 wird der Marker nicht gezeichnet. Negative Werte sind ein Fehler.
Prozentangaben: Bei % kann baseVal.value je nach Kontext unerwartete Werte liefern. Mit unitType prüfst du die Einheit.
Kompatibilität: In allen modernen Browsern seit Langem unterstützt. SVG-Elemente musst du mit createElementNS im SVG-Namensraum erzeugen, sonst gibt es die Eigenschaft nicht.

Siehe auch

SVGMarkerElement SVGMarkerElement.markerHeight SVGMarkerElement.markerUnits SVGMarkerElement.refX SVGAnimatedLength SVGLength SVGMarkerElement.orient