SVGAngle.newValueSpecifiedUnits() — Methode · JavaScript-Referenz

Signatur

SVGAngle.prototype.newValueSpecifiedUnits(unitType, valueInSpecifiedUnits)

Beschreibung

newValueSpecifiedUnits() setzt den Wert eines SVGAngle-Objekts in einem Schritt: Du gibst eine Einheit (unitType) und die Zahl in dieser Einheit an. Danach sind unitType, valueInSpecifiedUnits, valueAsString und value (immer in Grad) neu berechnet.

Am nützlichsten ist die Methode, wenn du Winkel in SVG-Elementen per Skript ändern willst, ohne Attribut-Strings selbst zusammenzubauen. Ein typisches Beispiel ist das orient-Attribut von <marker>, das über SVGMarkerElement.orientAngle.baseVal erreichbar ist. Eigenständige Winkelobjekte erzeugst du mit SVGSVGElement.createSVGAngle().

Als Einheit sind die Konstanten des Interfaces erlaubt: SVGAngle.SVG_ANGLETYPE_UNSPECIFIED (1, eine reine Zahl, wird als Grad gelesen), SVG_ANGLETYPE_DEG (2), SVG_ANGLETYPE_RAD (3) und SVG_ANGLETYPE_GRAD (4). SVG_ANGLETYPE_UNKNOWN (0) ist nicht erlaubt.

Parameter

Name	Typ	Default	Beschreibung
$unitType Pflicht	number		Die Einheit als Konstante von `SVGAngle`: `SVG_ANGLETYPE_UNSPECIFIED` (1), `SVG_ANGLETYPE_DEG` (2), `SVG_ANGLETYPE_RAD` (3) oder `SVG_ANGLETYPE_GRAD` (4).
$valueInSpecifiedUnits Pflicht	number		Der Zahlenwert des Winkels in der angegebenen Einheit, z. B. `90` bei Grad oder `Math.PI / 2` bei Radiant.

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Winkel in Grad setzen und auslesen

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

angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 90);

console.log(angle.unitType);              // 2 (DEG)
console.log(angle.valueInSpecifiedUnits); // 90
console.log(angle.value);                 // Wert immer in Grad
console.log(angle.valueAsString);

2 90 90 90deg

Radiant und Gon werden in Grad umgerechnet

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

angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
console.log(angle.valueAsString, angle.value.toFixed(2));

angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_GRAD, 100);
console.log(angle.valueAsString, angle.value.toFixed(2));

1.5707964rad 90.00 100grad 90.00

Marker-Ausrichtung per Skript ändern

// &lt;svg&gt;&lt;defs&gt;&lt;marker id="pfeil" orient="auto" ...&gt;&lt;/marker&gt;&lt;/defs&gt;&lt;/svg&gt;
const marker = document.querySelector("#pfeil");

// Festen Winkel von 45° setzen – das orient-Attribut wird mitgeändert
marker.orientAngle.baseVal.newValueSpecifiedUnits(
  SVGAngle.SVG_ANGLETYPE_DEG,
  45
);

console.log(marker.orientAngle.baseVal.value);
console.log(marker.getAttribute("orient"));

45 45deg (je nach Browser auch "45")

Ungültige Einheit abfangen

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

try {
  angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_UNKNOWN, 10);
} catch (err) {
  console.log(err.name);
}

NotSupportedError

// Wichtig · Fallstricke

Ausnahmen: Wenn unitType SVG_ANGLETYPE_UNKNOWN oder ein ungültiger Wert ist, wirft die Methode eine DOMException vom Typ NotSupportedError. Schreibgeschützte Winkel, etwa animVal, lösen NoModificationAllowedError aus. Ändere daher immer baseVal.
Genauigkeit: Winkel werden als 32-Bit-Gleitkommazahl gespeichert. Radiant-Werte wie Math.PI / 2 ergeben deshalb kleine Rundungsfehler in value und valueAsString.
value liefert immer Grad. Die ursprüngliche Einheit steht in unitType und valueInSpecifiedUnits.
Wenn du nur die Einheit wechseln willst und der Winkel gleich bleiben soll, nimm convertToSpecifiedUnits().
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Wie der Browser den Wert als Attribut-String zurückschreibt (z. B. "45" oder "45deg"), kann sich leicht unterscheiden.

Siehe auch

SVGAngle SVGAngle.convertToSpecifiedUnits() SVGAngle.valueInSpecifiedUnits SVGAngle.valueAsString SVGSVGElement.createSVGAngle() SVGMarkerElement.orientAngle