Signatur
Beschreibung
Die schreibgeschützte Eigenschaft baseVal der Schnittstelle SVGAnimatedAngle gibt ein SVGAngle-Objekt zurück. Es steht für den Basiswert eines Winkel-Attributs, also den Wert aus dem Markup bzw. den zuletzt per Skript gesetzten Wert, ohne laufende SMIL-Animationen. Den aktuell animierten Wert liefert dagegen animVal.
In der Praxis begegnet einem SVGAnimatedAngle fast nur über SVGMarkerElement.orientAngle. Diese Eigenschaft spiegelt das Attribut orient eines <marker>-Elements wider, wenn dort ein Winkel angegeben ist (z. B. orient="45" oder orient="0.5turn").
Die Eigenschaft selbst ist zwar schreibgeschützt, das zurückgegebene SVGAngle lässt sich aber verändern. Das Objekt ist „live“: Wenn du value, valueInSpecifiedUnits oder valueAsString setzt oder newValueSpecifiedUnits() bzw. convertToSpecifiedUnits() aufrufst, wird das zugehörige Attribut im DOM sofort angepasst. Andersherum wirken sich Änderungen per setAttribute() sofort auf das Objekt aus.
Wichtige Eigenschaften von SVGAngle: unitType (Einheitskonstante), value (Wert immer in Grad), valueInSpecifiedUnits (Zahl in der angegebenen Einheit) und valueAsString (z. B. "1.5rad").
Rückgabewert
SVGAngle-Objekt mit dem Basiswert des Winkel-Attributs. unitType ist eine der Konstanten SVG_ANGLETYPE_UNKNOWN (0), SVG_ANGLETYPE_UNSPECIFIED (1), SVG_ANGLETYPE_DEG (2), SVG_ANGLETYPE_RAD (3) oder SVG_ANGLETYPE_GRAD (4).Beispiele
Ausrichtung eines Markers auslesen
// <svg><defs><marker id="pfeil" orient="45deg">…</marker></defs></svg>
const marker = document.getElementById('pfeil');
const winkel = marker.orientAngle.baseVal;
console.log(winkel.unitType === SVGAngle.SVG_ANGLETYPE_DEG);
console.log(winkel.value);
console.log(winkel.valueAsString);Winkel per Skript ändern – das Attribut wird automatisch angepasst
const marker = document.querySelector('marker');
const winkel = marker.orientAngle.baseVal;
// Wert in Grad setzen
winkel.value = 90;
console.log(marker.getAttribute('orient'));
// Wert als String mit Einheit setzen
winkel.valueAsString = '100grad';
console.log(winkel.value); // intern in Grad umgerechnet
console.log(marker.getAttribute('orient'));Einheit umstellen (Grad → Bogenmaß)
const marker = document.querySelector('marker');
const winkel = marker.orientAngle.baseVal;
winkel.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 180);
winkel.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD);
console.log(winkel.unitType === SVGAngle.SVG_ANGLETYPE_RAD);
console.log(winkel.valueInSpecifiedUnits.toFixed(4));
console.log(Math.round(winkel.value));Marker-Rotation schrittweise animieren (ohne SMIL)
const marker = document.querySelector('marker');
const winkel = marker.orientAngle.baseVal;
const drehen = () => {
// value arbeitet immer in Grad
winkel.value = (winkel.value + 2) % 360;
requestAnimationFrame(drehen);
};
requestAnimationFrame(drehen);// Wichtig · Fallstricke
- Nur lesend, aber veränderbar: Eine Zuweisung wie
orientAngle.baseVal = …hat keine Wirkung (im strikten Modus gibt es einenTypeError). Ändern musst du stattdessen die Eigenschaften oder Methoden des zurückgegebenenSVGAngle. orient="auto"/"auto-start-reverse": Das sind keine Winkel.baseVal.valueist dann0. Ob die Ausrichtung automatisch ist, erkennst du anSVGMarkerElement.orientType. Fürauto-start-reverse(SVG 2) liefern manche BrowserSVG_MARKER_ORIENT_UNKNOWN.- Genauigkeit: Die Werte werden intern als 32-Bit-Gleitkommazahlen gespeichert. Nach Umrechnungen können kleine Rundungsfehler auftreten (z. B.
89.99999…). Runde deshalb vor Vergleichen. - Ungültige Werte: Setzt du
valueAsStringauf einen ungültigen String, wird einSyntaxErrorausgelöst. Eine unbekannte Einheit beinewValueSpecifiedUnits()löst einenNotSupportedErroraus. baseValundanimVal: Das Verhalten bei SMIL-Animationen ist nicht in allen Engines gleich. Wenn du den tatsächlich sichtbaren Zustand brauchst, nutzeanimValund teste in allen Zielbrowsern.- Die Schnittstelle wird von allen modernen Browsern unterstützt. Die Einheit
turnist neuer als SVG 1.1 und wird nicht überall gleich abgebildet.