SVGAnimatedAngle.animVal — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedAngle.animVal

Beschreibung

Die Eigenschaft animVal gehört zur Schnittstelle SVGAnimatedAngle. Sie gibt ein SVGAngle-Objekt zurück, das den aktuell wirksamen Winkel eines Attributs enthält. Läuft auf dem Attribut gerade eine SMIL-Animation (<animate> oder <set>), steht hier der animierte Wert. Ohne Animation entspricht animVal inhaltlich baseVal.

In der Praxis findet man SVGAnimatedAngle fast nur an einer Stelle: bei SVGMarkerElement.orientAngle. Das ist die Winkel-Darstellung des Attributs orient von <marker>. Über animVal lest ihr den Winkel aus, ohne das Attribut selbst zu parsen. Das Objekt enthält den Wert in Grad (value), den Wert in der ursprünglich angegebenen Einheit (valueInSpecifiedUnits), die Einheit (unitType) und die Textform (valueAsString).

Das zurückgegebene SVGAngle ist schreibgeschützt. Wollt ihr den Winkel ändern, geht das nur über baseVal oder über setAttribute('orient', …). Schreibt ihr auf animVal, wird eine NoModificationAllowedError-DOMException ausgelöst.

Rückgabewert

Typ

SVGAngle

Beschreibung

Ein schreibgeschütztes SVGAngle-Objekt mit dem aktuellen (animierten) Winkel. Die wichtigsten Eigenschaften sind value (in Grad), valueInSpecifiedUnits, valueAsString und unitType. Für unitType gibt es die Konstanten SVG_ANGLETYPE_UNSPECIFIED = 1, DEG = 2, RAD = 3 und GRAD = 4.

Beispiele

Winkel eines Markers auslesen

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

const angle = marker.orientAngle.animVal;
console.log(angle.value);         // Wert in Grad
console.log(angle.unitType);      // 2 = SVG_ANGLETYPE_DEG
console.log(angle.valueAsString);

45 2 45deg

Bogenmaß in Grad umrechnen lassen

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

const { animVal } = marker.orientAngle;
console.log(animVal.valueInSpecifiedUnits); // in der angegebenen Einheit
console.log(animVal.value.toFixed(2));      // immer in Grad
console.log(animVal.unitType === SVGAngle.SVG_ANGLETYPE_RAD);

0.5 28.65 true

animVal ist schreibgeschützt – stattdessen baseVal ändern

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

try {
  marker.orientAngle.animVal.value = 90;
} catch (err) {
  console.log(err.name);
}

// Richtig: den Basiswert ändern
marker.orientAngle.baseVal.value = 90;
console.log(marker.getAttribute('orient'));
console.log(marker.orientAngle.animVal.value);

NoModificationAllowedError 90 90

Animierten Wert während einer SMIL-Animation abfragen

// HTML: <svg><defs><marker id="m" orient="0">
//   <animate attributeName="orient" from="0" to="180" dur="4s" repeatCount="indefinite"/>
// </marker></defs></svg>
const marker = document.getElementById('m');

setInterval(() => {
  const base = marker.orientAngle.baseVal.value;
  const anim = marker.orientAngle.animVal.value;
  console.log(`Basis: ${base}°, aktuell: ${anim.toFixed(1)}°`);
}, 1000);

Basis: 0°, aktuell: 45.0° (Werte je nach Browser und Zeitpunkt)

// Wichtig · Fallstricke

Schreibschutz: Das SVGAngle aus animVal lässt sich nicht verändern. Wer auf value, valueInSpecifiedUnits oder valueAsString schreibt oder newValueSpecifiedUnits() bzw. convertToSpecifiedUnits() aufruft, löst eine NoModificationAllowedError aus.
orient="auto": Bei auto oder auto-start-reverse hat animVal.value den Wert 0. Welche Art von Ausrichtung gilt, steht in orientType (SVG_MARKER_ORIENT_AUTO, SVG_MARKER_ORIENT_ANGLE). Prüft deshalb immer zuerst orientType.
Uneinheitliches Verhalten bei Animationen: Ob animVal SMIL-Animationen tatsächlich widerspiegelt, ist nicht in allen Browsern gleich. SVG 2 hat die Trennung zwischen animVal und baseVal abgeschwächt. Verlasst euch deshalb nicht darauf, dass animierte Zwischenwerte ankommen.
Einheiten: value ist immer in Grad angegeben. Die ursprüngliche Einheit (rad, grad, turn) steckt nur in valueInSpecifiedUnits und unitType. turn wird von SVGAngle nicht als eigene Konstante unterstützt.

Siehe auch

SVGAnimatedAngle SVGAnimatedAngle.baseVal SVGAngle SVGMarkerElement.orientAngle SVGMarkerElement.orientType ElementInternals.ariaModal WorkerNavigator.hid