SVGMarkerElement.setOrientToAngle() — Methode · JavaScript-Referenz

Signatur

SVGMarkerElement.prototype.setOrientToAngle(angle)

Beschreibung

Die Methode setOrientToAngle() der Schnittstelle SVGMarkerElement legt fest, dass ein Marker (etwa eine Pfeilspitze an einer Linie oder einem Pfad) mit einem festen Winkel gezeichnet wird. Die Ausrichtung folgt dann nicht mehr der Richtung des Pfades. Die Methode schreibt den Wert des übergebenen SVGAngle in das Attribut orient. Gleichzeitig wird orientType.baseVal auf SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE (Wert 2) gesetzt, und orientAngle.baseVal übernimmt den Winkel.

Ein passendes SVGAngle lässt sich nicht mit new erzeugen. Man bekommt es über SVGSVGElement.prototype.createSVGAngle() oder nimmt ein vorhandenes, zum Beispiel marker.orientAngle.baseVal eines anderen Markers. Einheit und Wert setzt man anschließend mit newValueSpecifiedUnits() oder direkt über die Eigenschaften value bzw. valueAsString.

Das Gegenstück ist setOrientToAuto(): Damit richtet sich der Marker wieder automatisch nach der Pfadrichtung. In der Praxis kommt setOrientToAngle() vor allem bei dynamischen Visualisierungen zum Einsatz, etwa bei Kompassnadeln, Windrichtungspfeilen oder interaktiven Diagrammen. Der Winkel wird dort per Skript geändert, ohne mit Attribut-Strings zu arbeiten.

Parameter

Name	Typ	Default	Beschreibung
$angle Pflicht	SVGAngle		Das Winkelobjekt, dessen Wert (inklusive Einheit: `deg`, `rad`, `grad` oder ohne Einheit) in das `orient`-Attribut übernommen wird. Erzeugt wird es meist mit `svg.createSVGAngle()`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode ändert das Element direkt: Attribut orient, orientType und orientAngle.

Beispiele

Marker auf einen festen 45°-Winkel setzen

const svg = document.querySelector('svg');
const marker = document.querySelector('#pfeil'); // <marker id="pfeil" orient="auto">

// SVGAngle über das Wurzel-<svg> erzeugen
const angle = svg.createSVGAngle();
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);

marker.setOrientToAngle(angle);

console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
console.log(marker.orientAngle.baseVal.value);

true 45

Windrichtungspfeil per Schieberegler drehen

const svg = document.querySelector('#karte');
const marker = svg.querySelector('#windpfeil');
const slider = document.querySelector('#windrichtung'); // <input type="range" min="0" max="359">

// Ein SVGAngle-Objekt wiederverwenden, statt bei jedem Event ein neues zu erzeugen
const angle = svg.createSVGAngle();

const aktualisieren = () => {
  angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, Number(slider.value));
  marker.setOrientToAngle(angle);
};

slider.addEventListener('input', aktualisieren);
aktualisieren();

Zwischen fester und automatischer Ausrichtung umschalten

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

const setzeAusrichtung = (grad) => {
  if (grad === null) {
    marker.setOrientToAuto(); // folgt wieder der Pfadrichtung
    return;
  }
  const angle = svg.createSVGAngle();
  angle.valueAsString = `${grad}deg`;
  marker.setOrientToAngle(angle);
};

setzeAusrichtung(90);
console.log(marker.orientType.baseVal); // 2 = ANGLE
setzeAusrichtung(null);
console.log(marker.orientType.baseVal); // 1 = AUTO

2 1

// Wichtig · Fallstricke

Nur echte SVGAngle-Objekte: Übergibt man eine Zahl oder einen String wie \"45deg\", wirft die Methode einen TypeError. Wer lieber mit Strings arbeitet, nimmt marker.setAttribute('orient', '45deg').
createSVGAngle() gibt es nur auf SVGSVGElement: Die Methode muss auf einem <svg>-Element aufgerufen werden, nicht auf dem Marker selbst.
Kein Weg zu auto-start-reverse: Den SVG-2-Wert auto-start-reverse kann weder setOrientToAngle() noch setOrientToAuto() setzen. Dafür braucht es setAttribute('orient', 'auto-start-reverse'). orientType.baseVal meldet in diesem Fall SVG_MARKER_ORIENT_UNKNOWN (0).
Wert wird kopiert: Nach dem Aufruf wirken sich spätere Änderungen am übergebenen SVGAngle nicht mehr auf den Marker aus. Für eine Aktualisierung muss man setOrientToAngle() erneut aufrufen oder marker.orientAngle.baseVal direkt ändern.
Gemeinsam genutzte Marker: Ein <marker> kann von mehreren Pfaden referenziert werden. Eine Änderung der Ausrichtung betrifft dann alle diese Pfade.
Kompatibilität: Die Methode wird von allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) unterstützt. In Node.js gibt es sie nur mit einer DOM-Implementierung, die SVG unterstützt. jsdom setzt SVG-DOM-Methoden nur teilweise um.

Siehe auch

SVGMarkerElement SVGMarkerElement.setOrientToAuto() SVGMarkerElement.orientAngle SVGMarkerElement.orientType SVGAngle SVGSVGElement.createSVGAngle() Element.setAttribute()