SVGAngle.valueInSpecifiedUnits — Eigenschaft · JavaScript-Referenz

Signatur

SVGAngle.valueInSpecifiedUnits

Beschreibung

valueInSpecifiedUnits enthält den reinen Zahlenwert eines Winkels, und zwar in der Einheit, die der Winkel gerade hat. Welche Einheit das ist, steht in SVGAngle.unitType. Bei orient="1.5rad" liefert die Eigenschaft also 1.5. Die Eigenschaft value gibt denselben Winkel dagegen immer in Grad zurück.

Die Eigenschaft ist nützlich, wenn du einen Winkel ändern willst, ohne seine Einheit zu verlieren. Ein typischer Fall ist das Attribut orient eines <marker>-Elements. Wenn du valueInSpecifiedUnits setzt, behält der Winkel seine Einheit. Das zugehörige Attribut wird automatisch angepasst, z. B. von "45deg" auf "90deg".

An ein SVGAngle kommst du auf zwei Wegen:

über SVGSVGElement.createSVGAngle(): ein eigenständiges Objekt, das mit keinem Element verbunden ist,
über SVGMarkerElement.orientAngle.baseVal: ein Objekt, das mit dem Attribut orient verbunden ist.

Um Einheit und Wert gleichzeitig zu setzen, nimmst du newValueSpecifiedUnits(). Um einen Winkel in eine andere Einheit umzurechnen, nimmst du convertToSpecifiedUnits().

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number		Neuer Zahlenwert in der aktuellen Einheit (`unitType`). Die Einheit selbst ändert sich dabei nicht.

Rückgabewert

Typ

number

Beschreibung

Der Zahlenwert des Winkels in der Einheit aus unitType. Er wird intern als 32-Bit-Gleitkommazahl (float) gespeichert.

Beispiele

Wert in der eigenen Einheit und in Grad vergleichen

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

// 100 Gon (grad) setzen
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100);

console.log(angle.valueInSpecifiedUnits); // in grad
console.log(angle.value);                 // immer in Grad
console.log(angle.valueAsString);

100 90 100grad

Ausrichtung eines Markers ändern, ohne die Einheit zu verlieren

const marker = document.querySelector('marker#pfeil');
marker.setAttribute('orient', '45deg');

const angle = marker.orientAngle.baseVal;
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_DEG); // true
console.log(angle.valueInSpecifiedUnits);                   // 45

// Um 45° weiterdrehen – die Einheit bleibt erhalten
angle.valueInSpecifiedUnits += 45;
console.log(marker.getAttribute('orient'));

true 45 90deg

Nach dem Umrechnen der Einheit lesen

const svg = document.querySelector('svg');
const angle = svg.createSVGAngle();
angle.valueAsString = '180deg';

angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);

// Wert jetzt in Radiant (mit float32-Genauigkeit)
console.log(angle.valueInSpecifiedUnits.toFixed(5));
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_RAD);

3.14159 true

// Wichtig · Fallstricke

Genauigkeit: Der Wert wird als 32-Bit-Gleitkommazahl gespeichert. Werte wie Math.PI kommen deshalb leicht verändert zurück, z. B. 3.1415927410125732. Runde vor Vergleichen oder vor der Ausgabe.
Ungültige Werte: Das Setzen von NaN oder Infinity löst einen TypeError aus.
Nur lesbare Objekte: Das Objekt aus orientAngle.animVal kann nur gelesen werden. Beim Schreiben wird eine DOMException vom Typ NoModificationAllowedError ausgelöst. Verwende zum Ändern immer baseVal.
Werte ohne Einheit: Bei SVG_ANGLETYPE_UNSPECIFIED (z. B. orient="30") wird der Wert als Grad verstanden. valueInSpecifiedUnits und value sind dann gleich.
Schlüsselwörter statt Winkel: Wenn orient auf auto oder auto-start-reverse steht, gibt es keinen festen Winkel. Prüfe vorher orientType.
Browserunterstützung: Die Eigenschaft wird in allen modernen Browsern unterstützt.

Siehe auch

SVGAngle SVGAngle.value SVGAngle.unitType SVGAngle.valueAsString SVGAngle.newValueSpecifiedUnits() SVGAngle.convertToSpecifiedUnits() SVGMarkerElement.orientAngle SVGSVGElement.createSVGAngle()