SVGMarkerElement.orientAngle — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.orientAngle

Beschreibung

Die Eigenschaft orientAngle des Interfaces SVGMarkerElement gibt Skripten Zugriff auf den Winkel, um den ein <marker> (z. B. eine Pfeilspitze am Ende eines <path> oder einer <line>) gedreht wird. Der Wert stammt aus dem Attribut orient, wenn dort ein fester Winkel steht, z. B. orient="45", orient="45deg", orient="0.5rad" oder orient="50grad".

Zurückgegeben wird ein SVGAnimatedAngle. Es hat zwei SVGAngle-Objekte: baseVal enthält den im Attribut festgelegten Grundwert und lässt sich beschreiben. animVal enthält den aktuellen, eventuell durch SMIL-Animation veränderten Wert und ist schreibgeschützt. Über baseVal.value lesen und setzen Sie den Winkel immer in Grad. baseVal.valueInSpecifiedUnits und baseVal.unitType liefern dagegen den Wert und die Einheit so, wie sie im Attribut angegeben wurden.

Die Eigenschaft selbst ist schreibgeschützt: Sie können orientAngle kein neues Objekt zuweisen, aber das enthaltene baseVal verändern. Änderungen an baseVal werden sofort in das orient-Attribut zurückgeschrieben. Ob überhaupt ein Winkel gilt oder die automatische Ausrichtung (auto), erfahren Sie über die zugehörige Eigenschaft orientType.

Rückgabewert

Typ

SVGAnimatedAngle

Beschreibung

Ein Objekt mit baseVal (beschreibbares SVGAngle, Grundwert des Attributs) und animVal (schreibgeschütztes SVGAngle, aktueller animierter Wert). Steht im Attribut kein Winkel, sondern z. B. auto, ist der Winkel 0.

Beispiele

Winkel eines Markers auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(svgNS, 'marker');
marker.setAttribute('orient', '0.5rad');

const angle = marker.orientAngle.baseVal;
console.log(angle.valueInSpecifiedUnits);           // Wert in der angegebenen Einheit
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_RAD);
console.log(angle.value.toFixed(2));                // immer in Grad

0.5 true 28.65

Pfeilspitze per Skript drehen

// <svg><defs><marker id="pfeil" orient="0" markerWidth="10" markerHeight="10" refX="5" refY="5">
//   <path d="M0,0 L10,5 L0,10 z"/></marker></defs>
//   <line x1="10" y1="50" x2="190" y2="50" stroke="black" marker-end="url(#pfeil)"/></svg>
const marker = document.querySelector('#pfeil');

const drehen = (grad) => {
  marker.orientAngle.baseVal.value = grad; // schreibt das orient-Attribut zurück
  console.log(marker.getAttribute('orient'));
};

drehen(90);

90

Winkel mit Einheit setzen und Ausrichtung prüfen

const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');

// Winkel in Gon festlegen
marker.orientAngle.baseVal.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100);
console.log(marker.getAttribute('orient'));
console.log(marker.orientAngle.baseVal.value);

// Automatische Ausrichtung: Winkel wird 0, orientType zeigt AUTO
marker.setAttribute('orient', 'auto');
console.log(marker.orientAngle.baseVal.value);
console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

100grad 90 0 true

// Wichtig · Fallstricke

Nur fester Winkel: Bei orient="auto" oder orient="auto-start-reverse" liefert orientAngle den Winkel 0. Prüfen Sie deshalb vorher orientType.baseVal. Bei auto-start-reverse steht dort SVG_MARKER_ORIENT_UNKNOWN, weil diese Konstante älter ist als der Wert.
Einheiten: baseVal.value ist immer in Grad. Wenn Sie die Originaleinheit (rad, grad, turn) brauchen, nutzen Sie valueInSpecifiedUnits und unitType. Die Einheit turn hat keine eigene Konstante und wird je nach Browser als SVG_ANGLETYPE_UNKNOWN gemeldet.
Nicht zuweisbar: marker.orientAngle = … ignoriert der Browser, im Strict Mode gibt es einen TypeError. Ändern Sie stattdessen orientAngle.baseVal oder rufen Sie setOrientToAngle() auf.
animVal ist schreibgeschützt. Ein Schreibversuch löst eine NoModificationAllowedError-DOMException aus.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Die Werte auto-start-reverse und turn funktionieren in sehr alten Browsern eventuell nicht.

Siehe auch

SVGMarkerElement SVGMarkerElement.orientType SVGMarkerElement.setOrientToAngle() SVGMarkerElement.setOrientToAuto() SVGAnimatedAngle SVGAngle ResizeObserverEntry.contentBoxSize