SVGAngle.unitType — Eigenschaft · JavaScript-Referenz

Signatur

SVGAngle.unitType

Beschreibung

Die Eigenschaft unitType der Schnittstelle SVGAngle gibt an, in welcher Einheit der Winkel angegeben wurde. Der Wert ist eine vorzeichenlose Ganzzahl (unsigned short) und entspricht einer der statischen Konstanten von SVGAngle:

SVGAngle.SVG_ANGLETYPE_UNKNOWN (0) – unbekannte oder nicht unterstützte Einheit, z. B. turn
SVGAngle.SVG_ANGLETYPE_UNSPECIFIED (1) – Zahl ohne Einheit, wird als Grad interpretiert
SVGAngle.SVG_ANGLETYPE_DEG (2) – Grad (deg)
SVGAngle.SVG_ANGLETYPE_RAD (3) – Bogenmaß (rad)
SVGAngle.SVG_ANGLETYPE_GRAD (4) – Gon (grad)

Brauchen kannst du unitType, wenn du wissen musst, wie ein Winkel angegeben wurde. Das ist etwa der Fall, wenn du das orient-Attribut eines <marker> über SVGMarkerElement.orientAngle ausliest und valueInSpecifiedUnits richtig deuten willst. Die Eigenschaft value liefert immer Grad, valueInSpecifiedUnits dagegen die Zahl in der Einheit, die unitType angibt.

Da unitType schreibgeschützt ist, änderst du die Einheit nur über die Methoden newValueSpecifiedUnits() und convertToSpecifiedUnits() oder indem du valueAsString neu setzt.

Rückgabewert

Typ

number

Beschreibung

Eine der Konstanten SVGAngle.SVG_ANGLETYPE_UNKNOWN (0), SVG_ANGLETYPE_UNSPECIFIED (1), SVG_ANGLETYPE_DEG (2), SVG_ANGLETYPE_RAD (3) oder SVG_ANGLETYPE_GRAD (4).

Beispiele

Einheit eines selbst erzeugten Winkels abfragen

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

// Winkel im Bogenmaß setzen
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);

console.log(angle.unitType);                               // 3
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_RAD); // true
console.log(angle.valueAsString);                          // "1.5708rad" (Genauigkeit je nach Browser)
console.log(angle.value);                                  // 90 (immer Grad)

3 true 1.5708rad 90

orient-Attribut eines Markers auswerten

const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker.setAttribute('orient', '0.5rad');

const unitNames = {
  [SVGAngle.SVG_ANGLETYPE_UNKNOWN]: 'unbekannt',
  [SVGAngle.SVG_ANGLETYPE_UNSPECIFIED]: 'ohne Einheit (Grad)',
  [SVGAngle.SVG_ANGLETYPE_DEG]: 'deg',
  [SVGAngle.SVG_ANGLETYPE_RAD]: 'rad',
  [SVGAngle.SVG_ANGLETYPE_GRAD]: 'grad'
};

const { baseVal } = marker.orientAngle;
console.log(`${baseVal.valueInSpecifiedUnits} in ${unitNames[baseVal.unitType]}`);

0.5 in rad

Einheit umrechnen und unitType prüfen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const angle = svg.createSVGAngle();
angle.valueAsString = '100grad';
console.log(angle.unitType); // 4

// In Grad umrechnen – unitType ändert sich mit
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
console.log(angle.unitType);      // 2
console.log(angle.valueAsString); // "90deg"

4 2 90deg

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an unitType wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Die Einheit änderst du mit newValueSpecifiedUnits() oder convertToSpecifiedUnits().
Ein Winkel ohne Einheit (z. B. orient=\"45\") liefert SVG_ANGLETYPE_UNSPECIFIED (1) und nicht SVG_ANGLETYPE_DEG, obwohl er als Grad gilt.
Die CSS-Einheit turn hat keine eigene Konstante und wird in der Regel als SVG_ANGLETYPE_UNKNOWN (0) gemeldet. Wenn du SVG_ANGLETYPE_UNKNOWN an newValueSpecifiedUnits() übergibst, wird ein NotSupportedError ausgelöst.
Bei orient=\"auto\" oder \"auto-start-reverse\" hat der Winkel keine Aussagekraft. Prüfe in diesem Fall zuerst SVGMarkerElement.orientType.
Vergleiche besser mit den benannten Konstanten als mit festen Zahlen, das ist lesbarer. Die Eigenschaft wird von allen aktuellen Browsern unterstützt.

Siehe auch

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