Signatur
Beschreibung
Die schreibgeschützte Eigenschaft refY der Schnittstelle SVGMarkerElement gibt ein SVGAnimatedLength-Objekt zurück. Es spiegelt das Attribut refY des <marker>-Elements wider. Dieses Attribut legt die y-Koordinate des Referenzpunkts fest. Der Referenzpunkt ist die Stelle im Marker, die genau auf dem Scheitelpunkt des Pfads liegt, also am Anfang, in der Mitte oder am Ende einer Linie.
Die Koordinate bezieht sich auf das Koordinatensystem des Markerinhalts, nachdem viewBox und preserveAspectRatio angewendet wurden. Ist das Attribut nicht gesetzt, gilt der Wert 0.
Das zurückgegebene Objekt hat zwei Eigenschaften mit je einem SVGLength: baseVal enthält den statischen Attributwert und lässt sich verändern. animVal enthält den aktuellen Wert, der durch eine SMIL-Animation verändert sein kann, und ist nur lesbar. Die Eigenschaft refY selbst kannst du nicht neu zuweisen. Um den Referenzpunkt per Skript zu ändern, setzt du refY.baseVal.value oder verwendest setAttribute('refY', …).
In der Praxis brauchst du refY vor allem, um Pfeilspitzen oder andere Marker genau auf der Linie auszurichten, meist mittig zur Strichbreite. Zusammen mit refX kannst du den Ankerpunkt so dynamisch anpassen.
Rückgabewert
baseVal (veränderbares SVGLength, entspricht dem Attributwert) und animVal (nur lesbares SVGLength mit dem aktuellen, eventuell animierten Wert).Beispiele
refY 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 { baseVal, animVal } = marker.refY;
console.log(baseVal.value); // Zahlenwert
console.log(baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);
console.log(animVal.value);Referenzpunkt dynamisch verschieben
const marker = document.querySelector('#pfeil');
// Marker mittig ausrichten: halbe viewBox-Höhe
const vbHeight = marker.viewBox.baseVal.height;
marker.refY.baseVal.value = vbHeight / 2;
console.log(marker.getAttribute('refY'));Wert mit Einheit setzen und Standardwert prüfen
const svgNS = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(svgNS, 'marker');
// Ohne Attribut gilt der Standardwert 0
console.log(marker.refY.baseVal.value);
// Wert als String mit Einheit setzen
marker.refY.baseVal.valueAsString = '2.5';
console.log(marker.getAttribute('refY'));
// Direkte Zuweisung an refY schlägt fehl (nur Getter)
marker.refY = 10; // im Strict Mode: TypeError
console.log(marker.refY instanceof SVGAnimatedLength);// Wichtig · Fallstricke
- Nur lesbar:
marker.refY = 5hat keine Wirkung. Im Strict Mode (z. B. in ES-Modulen) wirft die Zuweisung einenTypeError. Ändere stattdessenrefY.baseVal.valueoder das Attribut. - animVal ist nur lesbar: Schreibst du in
animVal, wirft der Browser eineDOMException(NoModificationAllowedError). - Koordinatensystem:
refYbezieht sich auf den Inhalt des Markers nach Anwendung derviewBox, nicht auf das Koordinatensystem der Linie. OhneviewBoxgelten die Einheiten vonmarkerUnits(Standard:strokeWidth). - Schlüsselwörter: SVG 2 erlaubt für
refYauchtop,centerundbottom. Die Browser unterstützen das unterschiedlich, undbaseVal.valueliefert dann eventuell nicht den erwarteten Wert. - Groß-/Kleinschreibung: Der Attributname lautet
refYmit großem Y.getAttribute('refy')findet in SVG-Dokumenten nichts. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).