SVGMarkerElement.orient — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.orient

Beschreibung

Die Eigenschaft orient von SVGMarkerElement spiegelt das SVG-Attribut orient des <marker>-Elements wider. Sie legt fest, wie Marker gedreht werden, wenn sie an Pfaden, Linien oder Polylinien angebracht werden, etwa Pfeilspitzen, Punkte oder Messmarken.

Mögliche Werte:

"auto": Der Marker richtet sich an der Richtung des Pfads an der jeweiligen Stelle aus.
"auto-start-reverse": Wie auto, nur wird der Marker am Startpunkt um 180° gedreht. So reicht ein einziger Marker für Pfeilspitzen an beiden Enden.
Ein Winkel wie "45", "45deg", "0.5turn" oder "1rad": Der Marker wird immer um diesen festen Winkel gedreht, egal wie der Pfad verläuft.

Anders als die älteren Eigenschaften orientType und orientAngle, die animierte Objekte liefern, arbeitet orient direkt mit einem String. Wenn du den Wert setzt, ändert sich auch das Attribut im DOM, und orientType bzw. orientAngle werden entsprechend angepasst.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"0"	Neuer Wert beim Setzen: `"auto"`, `"auto-start-reverse"` oder eine Winkelangabe (`"30"`, `"30deg"`, `"0.25turn"` …). Ohne Einheit wird der Wert als Grad gelesen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des orient-Attributs als String. Fehlt das Attribut, wird der Standardwert "0" geliefert (je nach Browser kann das Ergebnis abweichen).

Beispiele

Ausrichtung eines Markers auslesen

// HTML: <svg><defs><marker id="pfeil" orient="auto" markerWidth="10" markerHeight="10" refX="5" refY="5"><path d="M0,0 L10,5 L0,10 z"/></marker></defs></svg>
const marker = document.getElementById('pfeil');
console.log(marker.orient);

auto

Pfeilspitzen an beiden Enden mit einem Marker

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

const marker = document.createElementNS(svgNS, 'marker');
marker.id = 'doppelpfeil';
marker.setAttribute('markerWidth', '10');
marker.setAttribute('markerHeight', '10');
marker.setAttribute('refX', '5');
marker.setAttribute('refY', '5');
marker.orient = 'auto-start-reverse'; // am Start um 180° gedreht

const spitze = document.createElementNS(svgNS, 'path');
spitze.setAttribute('d', 'M0,0 L10,5 L0,10 z');
marker.append(spitze);
svg.append(marker);

const linie = document.createElementNS(svgNS, 'line');
Object.entries({ x1: 20, y1: 50, x2: 180, y2: 50, stroke: 'black' })
  .forEach(([k, v]) => linie.setAttribute(k, v));
linie.setAttribute('marker-start', 'url(#doppelpfeil)');
linie.setAttribute('marker-end', 'url(#doppelpfeil)');
svg.append(linie);

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

auto-start-reverse

Festen Winkel setzen – mit Fallback ohne Unterstützung

const setzeOrient = (marker, wert) => {
  if ('orient' in SVGMarkerElement.prototype) {
    marker.orient = wert;
  } else {
    // Fallback: Attribut direkt setzen
    marker.setAttribute('orient', wert);
  }
};

const marker = document.querySelector('marker');
setzeOrient(marker, '45deg');
console.log(marker.getAttribute('orient'));
console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);

45deg true

// Wichtig · Fallstricke

Browser-Unterstützung: Die String-Eigenschaft orient stammt aus SVG 2 und ist nicht in allen Browsern umgesetzt. Prüfe vorher mit 'orient' in SVGMarkerElement.prototype, ob sie vorhanden ist. setAttribute('orient', …) funktioniert dagegen überall.
auto-start-reverse gibt es erst ab SVG 2. Sehr alte Renderer ignorieren den Wert und zeigen den Marker dann mit 0° an.
Bei auto-start-reverse meldet orientType.baseVal in manchen Browsern SVG_MARKER_ORIENT_UNKNOWN (0). Verlass dich für die Auswertung lieber auf den String-Wert.
Ungültige Werte (z. B. "links") lösen keinen Fehler aus. Der Marker wird dann ohne Drehung (0°) dargestellt.
Wie stark sich die Ausrichtung auswirkt, hängt von refX/refY ab: Um diesen Referenzpunkt wird der Marker gedreht.

Siehe auch

SVGMarkerElement SVGMarkerElement.orientType SVGMarkerElement.orientAngle SVGMarkerElement.setOrientToAuto() SVGMarkerElement.setOrientToAngle() Element.setAttribute() MathMLAnchorElement.origin