SVGSVGElement.createSVGAngle() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.createSVGAngle()

Beschreibung

Die Methode createSVGAngle() der Schnittstelle SVGSVGElement erzeugt ein neues SVGAngle-Objekt, das zu keinem Element und keinem Attribut gehört. Der Winkel startet mit dem Wert 0 und dem Einheitentyp SVG_ANGLETYPE_UNSPECIFIED (Konstante 1).

Ein SVGAngle speichert einen Winkel samt Einheit (Grad, Bogenmaß, Gon oder unspezifiziert) und kann zwischen diesen Einheiten umrechnen. Über value liest bzw. setzt man den Winkel immer in Grad, über valueInSpecifiedUnits in der eingestellten Einheit und über valueAsString als CSS-/SVG-Zeichenkette wie "45deg" oder "1.5rad".

Typische Einsatzzwecke sind die Umrechnung von Winkeleinheiten ohne eigene Mathematik oder das Vorbereiten eines Winkels, der anschließend etwa per SVGMarkerElement.setOrientToAngle() einem <marker> zugewiesen wird. Da das Objekt frei steht, verändern Änderungen daran nichts im DOM, solange man es nicht explizit übergibt.

Rückgabewert

Typ

SVGAngle

Beschreibung

Ein neues SVGAngle-Objekt mit value === 0 und unitType === SVGAngle.SVG_ANGLETYPE_UNSPECIFIED.

Beispiele

Winkel erzeugen und Grundwerte prüfen

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

console.log(angle.value);         // Wert in Grad
console.log(angle.unitType);      // 1 = UNSPECIFIED
console.log(angle.valueAsString); // Zeichenkette

0 1 0

Winkeleinheiten umrechnen (Grad → Bogenmaß → Gon)

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

// 90 Grad setzen
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 90);

// In Bogenmaß umrechnen
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);
console.log(angle.valueAsString);

// In Gon umrechnen
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD);
console.log(angle.valueInSpecifiedUnits);

// value liefert immer Grad
console.log(angle.value);

1.5707963267948966rad 100 90

Marker-Ausrichtung per SVGAngle setzen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const marker = document.createElementNS(NS, 'marker');
marker.id = 'pfeil';
svg.appendChild(marker);

const angle = svg.createSVGAngle();
angle.valueAsString = '45deg';

// Winkel an den Marker übergeben (setzt orient="45deg")
marker.setOrientToAngle(angle);
console.log(marker.getAttribute('orient'));

45deg

// Wichtig · Fallstricke

Die Methode existiert nur auf SVGSVGElement (also <svg>-Elementen), nicht auf anderen SVG-Elementen. Das Element muss nicht im Dokument eingehängt sein.
Das zurückgegebene Objekt ist nicht live mit einem Attribut verbunden. Änderungen wirken sich erst aus, wenn man es z. B. an setOrientToAngle() übergibt.
Ungültige Zeichenketten bei valueAsString (z. B. "abc") oder ungültige Einheitenkonstanten lösen eine SyntaxError- bzw. NotSupportedError-DOMException aus.
Die Einheit turn aus CSS wird von SVGAngle nicht unterstützt – nur deg, rad, grad und einheitenlose Werte.
Kompatibilität: Wird von allen modernen Browsern unterstützt; für reine Winkelumrechnung ist einfache Mathematik (deg * Math.PI / 180) oft schlanker.

Siehe auch

SVGAngle SVGSVGElement SVGMarkerElement.setOrientToAngle() SVGSVGElement.createSVGLength() SVGSVGElement.createSVGNumber() SVGSVGElement.createSVGTransform()