SVGAngle.value — Eigenschaft · JavaScript-Referenz

Signatur

SVGAngle.value

Beschreibung

Die Eigenschaft value der Schnittstelle SVGAngle gibt den Winkel als number in Grad zurück. Die ursprüngliche Einheit spielt dabei keine Rolle: Ob der Winkel als 1.5708rad, 100grad, 0.25turn oder 90deg angegeben wurde, value liefert immer den umgerechneten Wert in Grad, also etwa 90.

Damit eignet sich value gut, wenn Sie in Skripten mit Winkeln rechnen wollen, ohne selbst die Einheit prüfen und umrechnen zu müssen. Den Wert in der ursprünglichen Einheit liefert valueInSpecifiedUnits, die Einheit selbst steht in unitType, und die Textform finden Sie in valueAsString.

SVGAngle-Objekte bekommen Sie typischerweise über SVGSVGElement.createSVGAngle() oder über animierbare Winkel-Eigenschaften, etwa SVGMarkerElement.orientAngle.baseVal. Wenn Sie value auf ein beschreibbares Objekt setzen, werden valueInSpecifiedUnits und valueAsString automatisch angepasst. Gehört das Objekt zu einem Element, wird auch das zugehörige Attribut aktualisiert.

Parameter

Name	Typ	Default	Beschreibung
$wert Pflicht	number		Nur beim Setzen: der neue Winkel in Grad als Gleitkommazahl, z. B. `45` oder `-12.5`.

Rückgabewert

Typ

number

Beschreibung

Der Winkel in Grad als Gleitkommazahl, unabhängig von der Einheit in unitType.

Beispiele

Radiant in Grad umrechnen lassen

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

// Winkel in Radiant festlegen
winkel.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);

console.log(winkel.valueInSpecifiedUnits); // Wert in der angegebenen Einheit
console.log(winkel.value);                 // immer in Grad

1.5707963267948966 90

Gon-Angabe aus einem String auswerten

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

winkel.valueAsString = '100grad';
console.log(winkel.unitType === SVGAngle.SVG_ANGLETYPE_GRAD);
console.log(winkel.value);

true 90

Ausrichtung eines Markers per Skript drehen

// HTML: <svg><defs><marker id="pfeil" orient="45">…</marker></defs></svg>
const marker = document.getElementById('pfeil');
const orient = marker.orientAngle.baseVal;

console.log(orient.value); // 45

// Marker um weitere 30 Grad drehen
orient.value += 30;
console.log(marker.getAttribute('orient'));

45 75

// Wichtig · Fallstricke

Nur lesbare Objekte: Wenn Sie value auf einem animierten Wert setzen (z. B. orientAngle.animVal), wird ein DOMException vom Typ NoModificationAllowedError geworfen. Ändern Sie stattdessen immer baseVal.
Ungültige Zahlen: Mit NaN oder Infinity werfen Browser einen TypeError.
Rundung: Bei der Umrechnung von rad oder turn in Grad können Gleitkomma-Ungenauigkeiten entstehen, zum Beispiel 89.99999999999999. Runden Sie den Wert, bevor Sie ihn vergleichen.
Einheit nach dem Setzen: Welche Einheit (unitType) nach dem Setzen von value gilt, hängt von der Spezifikationsversion und vom Browser ab. Wenn eine bestimmte Einheit wichtig ist, verwenden Sie newValueSpecifiedUnits().
Browser-Unterstützung: Die Eigenschaft wird in allen aktuellen Browsern unterstützt. Die Einheit turn kennen dagegen nicht alle älteren Implementierungen.

Siehe auch

SVGAngle SVGAngle.valueInSpecifiedUnits SVGAngle.valueAsString SVGAngle.unitType SVGAngle.prototype.newValueSpecifiedUnits() SVGSVGElement.prototype.createSVGAngle() SVGMarkerElement.orientAngle