SVGMarkerElement.refX — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.refX

Beschreibung

Die Eigenschaft refX des Interfaces SVGMarkerElement steht für das Attribut refX eines <marker>-Elements. Zusammen mit refY legt sie den Referenzpunkt des Markers fest. Dieser Punkt wird genau auf den Scheitelpunkt des Pfads, der Linie oder der Polylinie gelegt, an dem der Marker erscheint, etwa am Anfang oder Ende einer Linie bei marker-start und marker-end.

Der Wert wird im Koordinatensystem des Markers angegeben, also nach der Umrechnung durch viewBox und preserveAspectRatio. Braucht man eine Pfeilspitze, die bündig am Linienende sitzt, setzt man refX meist auf die x-Koordinate der Pfeilspitze.

Die Eigenschaft selbst kann man nicht überschreiben. Sie liefert ein SVGAnimatedLength-Objekt mit zwei Teilen:

baseVal: ein veränderbares SVGLength mit dem Attributwert. Über baseVal.value oder newValueSpecifiedUnits() ändert man den Wert.
animVal: ein schreibgeschütztes SVGLength mit dem aktuellen Wert, wenn gerade eine SMIL-Animation läuft.

Fehlt das Attribut, ist der Wert 0.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Attributwert, veränderbar) und animVal (aktueller Wert während einer Animation, schreibgeschützt). Beide sind vom Typ SVGLength.

Beispiele

refX eines Pfeil-Markers auslesen

// HTML:
// <svg width="200" height="60">
//   <defs>
//     <marker id="pfeil" viewBox="0 0 10 10" refX="10" refY="5"
//             markerWidth="6" markerHeight="6" orient="auto">
//       <path d="M0,0 L10,5 L0,10 z" />
//     </marker>
//   </defs>
//   <line x1="10" y1="30" x2="180" y2="30" stroke="black" marker-end="url(#pfeil)" />
// </svg>

const marker = document.getElementById('pfeil');
const refX = marker.refX;

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

true 10 10

Referenzpunkt zur Laufzeit verschieben

const marker = document.getElementById('pfeil');

// Pfeilspitze etwas zurücksetzen, damit sie nicht über die Linie ragt
marker.refX.baseVal.value = 8;

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

8

Marker per Skript erzeugen und refX mit Einheit setzen

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';
marker.setAttribute('viewBox', '0 0 10 10');
marker.setAttribute('markerWidth', '5');
marker.setAttribute('markerHeight', '5');

// refX/refY auf die Kreismitte legen (Einheitentyp NUMBER = 1)
marker.refX.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 5);
marker.refY.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 5);

const circle = document.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '5');
circle.setAttribute('cy', '5');
circle.setAttribute('r', '5');
marker.append(circle);
defs.append(marker);

console.log(marker.refX.baseVal.valueAsString);

5

// Wichtig · Fallstricke

Zuweisung ohne Wirkung: Eine Zuweisung wie marker.refX = 5 ändert nichts; im Strict Mode wirft sie einen TypeError. Ändern Sie stattdessen marker.refX.baseVal.value oder verwenden Sie setAttribute('refX', …).
Groß- und Kleinschreibung: Das Attribut heißt refX mit großem X. createElementNS und setAttribute in SVG-Dokumenten unterscheiden die Schreibweise. Mit createElement (ohne SVG-Namensraum) entsteht kein SVGMarkerElement, dann ist refX undefined.
Koordinatensystem: Der Wert bezieht sich auf das Koordinatensystem von viewBox, nicht auf Bildschirmpixel. Ohne viewBox gilt das Koordinatensystem aus markerWidth und markerHeight, abhängig von markerUnits.
Schlüsselwörter: SVG 2 erlaubt für refX auch left, center und right. Wie diese Werte im DOM-Wert erscheinen, ist nicht in allen Browsern gleich. Für verlässliche Skripte verwenden Sie besser Zahlen.
animVal: Der Wert unterscheidet sich von baseVal nur, wenn eine SMIL-Animation läuft, etwa mit <animate attributeName="refX">.
Browser-Unterstützung: Die Eigenschaft wird seit vielen Jahren von allen aktuellen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGMarkerElement SVGMarkerElement.refY SVGAnimatedLength SVGLength SVGMarkerElement.markerWidth SVGMarkerElement.orientType HTMLTextAreaElement.rows