</> programmierung.net
Start · Sprachen · JavaScript · Referenz · SVGAngle

SVGAngle

Schnittstelle

Stellt einen SVG-Winkelwert dar, also einen <code>&lt;angle&gt;</code> mit Einheit (deg, rad, grad) oder eine einheitenlose <code>&lt;number&gt;</code>, und rechnet zwischen den Einheiten um.

seit JavaScript SVG 1.1 – Baseline: alle modernen Browser Kategorie: webapi

Signatur

interface SVGAngle

Beschreibung

SVGAngle ist die DOM-Darstellung eines Winkels in SVG. Ein Winkel hat immer einen Zahlenwert und eine Einheit (unitType). Über die Eigenschaften können Sie den Wert in Grad lesen und setzen (value), ihn in der ursprünglich angegebenen Einheit abfragen (valueInSpecifiedUnits) oder ihn als Zeichenkette wie "45deg" bearbeiten (valueAsString).

Einen eigenen Konstruktor gibt es nicht. Sie erhalten ein SVGAngle entweder über SVGSVGElement.createSVGAngle() oder über animierbare Attribute wie SVGMarkerElement.orientAngle. Dieses liefert ein SVGAnimatedAngle, dessen baseVal und animVal selbst SVGAngle-Objekte sind.

Das Interface definiert diese Einheiten-Konstanten:

  • SVG_ANGLETYPE_UNKNOWN (0): unbekannte oder ungültige Einheit
  • SVG_ANGLETYPE_UNSPECIFIED (1): Zahl ohne Einheit, wird als Grad interpretiert
  • SVG_ANGLETYPE_DEG (2): Grad
  • SVG_ANGLETYPE_RAD (3): Bogenmaß
  • SVG_ANGLETYPE_GRAD (4): Gon (400 Gon ergeben einen Vollkreis)

Eigenschaften und Methoden:

  • unitType (nur lesbar): eine der Konstanten oben
  • value: der Winkel immer in Grad
  • valueInSpecifiedUnits: der Zahlenwert in der aktuellen Einheit
  • valueAsString: der Wert als Zeichenkette mit Einheit
  • newValueSpecifiedUnits(unitType, value): setzt Einheit und Wert gleichzeitig
  • convertToSpecifiedUnits(unitType): rechnet in eine andere Einheit um, ohne den Winkel selbst zu ändern

Parameter

Name Typ Default Beschreibung
$unitType Pflicht number Parameter von newValueSpecifiedUnits() und convertToSpecifiedUnits(): eine der Konstanten SVGAngle.SVG_ANGLETYPE_* (1–4).
$valueInSpecifiedUnits Pflicht number Zweiter Parameter von newValueSpecifiedUnits(): der Zahlenwert in der gewählten Einheit.

Rückgabewert

Typ
SVGAngle
Beschreibung
Das Winkelobjekt selbst. Beide Methoden geben undefined zurück und verändern das Objekt direkt.

Beispiele

Winkel erzeugen und in Bogenmaß umrechnen

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

// 90 Grad setzen
angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 90);
console.log(angle.value, angle.valueAsString);

// In Bogenmaß umrechnen
angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_RAD);
console.log(angle.valueInSpecifiedUnits.toFixed(4));
console.log(angle.value); // bleibt in Grad
90 "90deg" true 1.5708 90

Ausrichtung eines Markers über orientAngle lesen

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

const base = marker.orientAngle.baseVal; // SVGAngle
console.log(base.unitType === SVGAngle.SVG_ANGLETYPE_GRAD);
console.log(base.valueInSpecifiedUnits); // 100
console.log(base.value);                 // in Grad
true 100 90

Winkel per Zeichenkette setzen und das Attribut synchronisieren

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

const angle = marker.orientAngle.baseVal;
angle.valueAsString = '0.5rad';

// Die Änderung wird ins Attribut zurückgeschrieben
console.log(marker.getAttribute('orient'));

// Über value wird immer in Grad gesetzt
angle.value = 45;
console.log(angle.valueAsString);
0.5rad 45deg (je nach Browser kann die Einheit erhalten bleiben, z. B. "0.785...rad")

// Wichtig · Fallstricke

  • Kein Konstruktor: new SVGAngle() wirft einen TypeError. Verwenden Sie stattdessen svgElement.createSVGAngle().
  • value ist immer in Grad, auch wenn die Einheit rad oder grad ist. Brauchen Sie den Rohwert in der angegebenen Einheit, lesen Sie valueInSpecifiedUnits.
  • Die Einheit turn wird nicht unterstützt. Ungültige Zeichenketten in valueAsString lösen einen SyntaxError aus. Wird SVG_ANGLETYPE_UNKNOWN an die Methoden übergeben, gibt es einen NotSupportedError.
  • animVal ist schreibgeschützt. Schreibzugriffe auf orientAngle.animVal werfen einen NoModificationAllowedError. Ändern Sie immer baseVal.
  • orient="auto" bzw. auto-start-reverse: Hier ist orientAngle.baseVal 0. Den eigentlichen Modus lesen Sie über orientType.
  • Browser-Unterstützung: Das Interface wird in allen modernen Browsern unterstützt. Wie Werte nach einer Änderung von value serialisiert werden, unterscheidet sich jedoch leicht zwischen den Browsern.

Siehe auch

SVGAnimatedAngle SVGMarkerElement SVGSVGElement.createSVGAngle() SVGLength SVGNumber
← Vorheriger Eintrag SVGAElement.username