SVGAngle.convertToSpecifiedUnits() — Methode · JavaScript-Referenz

Signatur

SVGAngle.prototype.convertToSpecifiedUnits(unitType)

Beschreibung

Mit convertToSpecifiedUnits() ändern Sie die Einheit eines SVGAngle-Objekts. Der Winkel selbst bleibt gleich, nur seine Darstellung ändert sich. Nach dem Aufruf gilt:

unitType enthält die neue Einheit.
valueInSpecifiedUnits enthält den umgerechneten Zahlenwert.
valueAsString enthält die neue Textform, z. B. "100grad".
value ist unverändert. Diese Eigenschaft gibt den Winkel immer in Grad an.

Die Methode ist nützlich, wenn Sie Winkel in einer festen Einheit ausgeben oder weiterverarbeiten wollen. Ein Beispiel ist die Umrechnung von Grad in Radiant für Math.sin() und Math.cos(). Auch Attributwerte wie orient eines <marker>-Elements lassen sich so einheitlich schreiben.

Ein SVGAngle bekommen Sie auf zwei Wegen: als freies Objekt über SVGSVGElement.createSVGAngle() oder als „lebendigen“ Wert über SVGMarkerElement.orientAngle.baseVal. Im zweiten Fall schreibt der Aufruf die neue Einheit direkt in das zugehörige Attribut zurück.

Parameter

Name	Typ	Default	Beschreibung
$unitType Pflicht	number		Die Ziel-Einheit als Konstante von `SVGAngle`: `SVG_ANGLETYPE_UNSPECIFIED` (`1`, Zahl ohne Einheit, wird als Grad gelesen), `SVG_ANGLETYPE_DEG` (`2`, Grad), `SVG_ANGLETYPE_RAD` (`3`, Radiant) oder `SVG_ANGLETYPE_GRAD` (`4`, Gon).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode ändert das SVGAngle-Objekt direkt.

Beispiele

Grad in Radiant umrechnen

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

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

// In Radiant umrechnen
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);

console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_RAD);
console.log(angle.valueInSpecifiedUnits.toFixed(5));
console.log(angle.value); // immer in Grad

true 3.14159 180

Winkel für Math.sin() und Math.cos() vorbereiten

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

const toRadians = (angleString) => {
  const angle = svg.createSVGAngle();
  angle.valueAsString = angleString;   // z. B. "90deg" oder "100grad"
  angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);
  return angle.valueInSpecifiedUnits;
};

const rad = toRadians('100grad');       // 100 Gon = 90 Grad
console.log(Math.sin(rad).toFixed(3));

1.000

orient-Attribut eines Markers umschreiben

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const marker = document.createElementNS(svgNS, 'marker');
marker.setAttribute('orient', '90deg');
svg.appendChild(marker);
document.body.appendChild(svg);

const base = marker.orientAngle.baseVal;
base.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD);

console.log(base.valueAsString);
console.log(marker.getAttribute('orient'));

100grad 100grad

// Wichtig · Fallstricke

Ungültige Einheit: Bei SVG_ANGLETYPE_UNKNOWN (0) oder einem anderen ungültigen Wert wirft die Methode eine DOMException vom Typ NotSupportedError.
Gleitkomma-Genauigkeit: Die Werte werden intern als 32-Bit-Gleitkommazahlen gespeichert. Aus 180 Grad wird daher z. B. 3.1415927410125732 statt Math.PI. Runden Sie vor Vergleichen oder vor der Ausgabe.
Nur-Lese-Werte: Auf animVal (z. B. marker.orientAngle.animVal) führt der Aufruf zu einem NoModificationAllowedError. Ändern Sie stattdessen baseVal.
Nebeneffekt: Über baseVal ändert der Aufruf das zugehörige DOM-Attribut. Das kann MutationObserver auslösen.
Alternative: Für reine Umrechnungen ohne SVG-Bezug ist einfache Mathematik schneller und klarer (deg * Math.PI / 180). Die Einheit turn kennt SVGAngle nicht.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Einheit grad ist bei älteren Engines teilweise fehlerhaft umgesetzt.

Siehe auch

SVGAngle SVGAngle.newValueSpecifiedUnits() SVGLength.convertToSpecifiedUnits() SVGLength.newValueSpecifiedUnits() Range.selectNodeContents()