SVGAnimatedAngle — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedAngle

Beschreibung

SVGAnimatedAngle ist eine Hilfsschnittstelle aus dem SVG-DOM. Sie steht für ein Attribut, dessen Wert ein Winkel ist und das per SMIL-Animation (z. B. <animate>) verändert werden kann. Statt eines einfachen Strings bekommt man zwei typisierte SVGAngle-Objekte, mit denen man Zahlenwert und Einheit (Grad, Radiant, Gon) direkt lesen und ändern kann.

baseVal (SVGAngle, les- und schreibbar über seine Eigenschaften): der im Attribut hinterlegte Grundwert, also der Wert ohne laufende Animation.
animVal (SVGAngle, nur lesbar): der aktuelle, gegebenenfalls gerade animierte Wert.

In der Praxis kommt die Schnittstelle vor allem an einer Stelle vor: SVGMarkerElement.orientAngle, die das Attribut orient eines <marker> abbildet. Benutzt wird sie, wenn man die Drehung von Pfeilspitzen und anderen Markern per Skript auslesen oder ändern möchte, ohne selbst Strings wie "45deg" zerlegen zu müssen.

Man kann die Schnittstelle nicht selbst erzeugen – es gibt keinen Konstruktor. Man bekommt Instanzen immer über die passende Element-Eigenschaft. Änderungen an baseVal werden sofort ins zugehörige Attribut zurückgeschrieben.

Rückgabewert

Typ

SVGAnimatedAngle

Beschreibung

Objekt mit den Eigenschaften baseVal und animVal, beide vom Typ SVGAngle. Man erhält es z. B. über SVGMarkerElement.orientAngle.

Beispiele

Marker-Winkel auslesen

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

const angle = marker.orientAngle; // SVGAnimatedAngle
console.log(angle.baseVal.value);          // Wert in Grad
console.log(angle.baseVal.unitType === SVGAngle.SVG_ANGLETYPE_UNSPECIFIED);
console.log(angle.animVal.valueAsString);

45 true 45

Winkel per Skript setzen (wird ins Attribut zurückgeschrieben)

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

// Pfeilspitze um 90 Grad drehen
marker.orientAngle.baseVal.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 90);

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

90deg 90

Einheiten umrechnen: Gon in Grad

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

const { baseVal } = marker.orientAngle;
console.log(baseVal.valueInSpecifiedUnits, baseVal.unitType === SVGAngle.SVG_ANGLETYPE_GRAD);

// Intern in Grad umstellen
baseVal.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
console.log(baseVal.valueAsString);

100 true 90deg

Winkel mit einem neuen SVGAngle-Objekt setzen

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

const a = svg.createSVGAngle();
a.valueAsString = '30deg';
marker.setOrientToAngle(a);

console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE);
console.log(marker.orientAngle.baseVal.value);

true 30

// Wichtig · Fallstricke

Kein Konstruktor: new SVGAnimatedAngle() wirft einen TypeError. Instanzen erhält man nur über Element-Eigenschaften wie SVGMarkerElement.orientAngle.
animVal ist nur lesbar: Wenn man versucht, ihn zu ändern (z. B. animVal.value = 10), wird in modernen Browsern eine NoModificationAllowedError-DOMException geworfen. Ändern sollte man immer über baseVal.
orient="auto" / "auto-start-reverse": Bei diesen Werten gibt es keinen festen Winkel. orientAngle.baseVal.value liefert dann 0. Den eigentlichen Modus erkennt man an orientType. Den Wert auto-start-reverse kennt die Konstanten-API aus SVG 1.1 nicht, dafür steht dort SVG_MARKER_ORIENT_UNKNOWN.
Animierte Werte: Wie gut animVal laufende SMIL-Animationen widerspiegelt, ist von Browser zu Browser unterschiedlich. Bei CSS-Animationen wird animVal nicht aktualisiert.
Kompatibilität: Die Schnittstelle wird von allen aktuellen Browsern unterstützt, ist aber eine selten genutzte Altlast aus SVG 1.1. Die Einheit turn hat keine eigene Konstante, dafür steht SVG_ANGLETYPE_UNKNOWN.

Siehe auch

SVGAngle SVGMarkerElement SVGMarkerElement.orientAngle SVGMarkerElement.prototype.setOrientToAngle() SVGSVGElement.prototype.createSVGAngle() SVGAnimatedEnumeration SVGAnimatedLength