SVGMarkerElement.setOrientToAuto() — Methode · JavaScript-Referenz

Signatur

SVGMarkerElement.prototype.setOrientToAuto()

Beschreibung

Die Methode setOrientToAuto() der Schnittstelle SVGMarkerElement setzt das Attribut orient eines <marker>-Elements auf den Wert auto. Dann dreht der Browser den Marker (z. B. eine Pfeilspitze) an jedem Scheitelpunkt so, dass er in die Richtung des Pfades zeigt.

Nach dem Aufruf hat orientType.baseVal den Wert SVGMarkerElement.SVG_MARKER_ORIENT_AUTO (1). Das orientAngle.baseVal wird auf 0 zurückgesetzt. Dasselbe erreicht man auch mit marker.setAttribute("orient", "auto"). Die Methode ist aber typsicher und macht die Absicht im Code klarer.

Man braucht sie vor allem, wenn Marker zur Laufzeit umgeschaltet werden, etwa von einem festen Winkel (per setOrientToAngle()) zurück auf automatische Ausrichtung, z. B. in Diagramm- oder Graph-Editoren.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode ändert direkt das orient-Attribut des Elements.

Beispiele

Pfeilspitze automatisch am Pfad ausrichten

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');

const defs = document.createElementNS(svgNS, 'defs');
const marker = document.createElementNS(svgNS, 'marker');
marker.id = 'pfeil';
marker.setAttribute('viewBox', '0 0 10 10');
marker.setAttribute('refX', '5');
marker.setAttribute('refY', '5');
marker.setAttribute('markerWidth', '6');
marker.setAttribute('markerHeight', '6');

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

// Marker folgt der Pfadrichtung
marker.setOrientToAuto();

const linie = document.createElementNS(svgNS, 'path');
linie.setAttribute('d', 'M10,90 L190,10');
linie.setAttribute('stroke', 'black');
linie.setAttribute('marker-end', 'url(#pfeil)');

svg.append(defs, linie);
document.body.append(svg);

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

auto

Zwischen festem Winkel und auto umschalten

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

// Zuerst fester Winkel von 45°
const winkel = svg.createSVGAngle();
winkel.newValueSpecifiedUnits(SVGAngle.SVG_ANGLE_TYPE_DEG, 45);
marker.setOrientToAngle(winkel);
console.log(marker.orientType.baseVal, marker.orientAngle.baseVal.value);

// Zurück zur automatischen Ausrichtung
marker.setOrientToAuto();
console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);
console.log(marker.orientAngle.baseVal.value);

2 45 true 0

Umschalter per Checkbox in einem Diagramm-Editor

const marker = document.querySelector('marker#pfeil');
const checkbox = document.querySelector('#auto-ausrichtung');

checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    marker.setOrientToAuto();
  } else {
    marker.setAttribute('orient', '0');
  }
  console.log('orient =', marker.getAttribute('orient'));
});

orient = auto

// Wichtig · Fallstricke

Kein auto-start-reverse: Die Methode setzt immer nur auto. Für eine umgedrehte Startmarkierung (z. B. Doppelpfeile) nimmt man setAttribute('orient', 'auto-start-reverse'). orientType.baseVal meldet dafür dann SVG_MARKER_ORIENT_UNKNOWN (0).
Namespace beachten: Marker, die per Skript erzeugt werden, müssen mit document.createElementNS('http://www.w3.org/2000/svg', 'marker') angelegt werden. Mit createElement entsteht kein SVGMarkerElement, und die Methode fehlt.
Nur Basiswert: Die Methode ändert das Attribut, also den baseVal. Eine laufende SMIL-Animation von orient kann den angezeigten Wert (animVal) überschreiben.
Kompatibilität: Wird von allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit Langem unterstützt. Nicht verfügbar in Node.js ohne DOM-Implementierung. Auch jsdom unterstützt SVG-Methoden nur teilweise.

Siehe auch

SVGMarkerElement SVGMarkerElement.setOrientToAngle() SVGMarkerElement.orientType SVGMarkerElement.orientAngle SVGAngle Element.setAttribute()