SVGTransform.angle — Eigenschaft · JavaScript-Referenz

Signatur

SVGTransform.angle

Beschreibung

Die Eigenschaft angle eines SVGTransform-Objekts gibt den Winkel der Transformation in Grad zurück. Sie ist nur lesbar. Einen Wert hat sie nur bei Transformationen vom Typ SVG_TRANSFORM_ROTATE (4), SVG_TRANSFORM_SKEWX (5) und SVG_TRANSFORM_SKEWY (6). Bei allen anderen Typen (matrix, translate, scale) ist der Wert 0.

Nützlich ist angle, wenn du das transform-Attribut eines SVG-Elements auswerten willst, ohne den Attributtext selbst zu zerlegen. Ein Beispiel: Du willst den aktuellen Drehwinkel eines Zeigers oder Reglers auslesen und dann schrittweise ändern. Zugriff auf die einzelnen Transformationen bekommst du über element.transform.baseVal (eine SVGTransformList).

Ändern kannst du den Winkel nur über die Methoden setRotate(angle, cx, cy), setSkewX(angle) oder setSkewY(angle). Danach zeigt angle den neuen Wert. Den Drehpunkt einer Rotation liefert angle nicht mit. Den findest du nur indirekt über die Eigenschaft matrix.

Rückgabewert

Typ

number

Beschreibung

Winkel in Grad (Gleitkommazahl) bei rotate, skewX und skewY, sonst 0.

Beispiele

Drehwinkel aus dem transform-Attribut lesen

// <svg><rect id="zeiger" width="100" height="4" transform="rotate(45 50 50)"/></svg>
const rect = document.getElementById('zeiger');
const t = rect.transform.baseVal.getItem(0);

if (t.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
  console.log(`Drehwinkel: ${t.angle}°`);
}

Drehwinkel: 45°

Alle Transformationen eines Elements auswerten

// <g id="gruppe" transform="translate(10,20) rotate(15) skewX(20) scale(2)">…</g>
const gruppe = document.getElementById('gruppe');
const liste = gruppe.transform.baseVal;

const namen = ['unknown', 'matrix', 'translate', 'scale', 'rotate', 'skewX', 'skewY'];
for (let i = 0; i < liste.numberOfItems; i++) {
  const t = liste.getItem(i);
  console.log(namen[t.type], t.angle);
}

translate 0 rotate 15 skewX 20 scale 0

Regler schrittweise weiterdrehen

const svg = document.querySelector('svg');
const knopf = svg.querySelector('#knopf');

// Transformation anlegen, falls noch keine da ist
if (knopf.transform.baseVal.numberOfItems === 0) {
  const neu = svg.createSVGTransform();
  neu.setRotate(0, 50, 50);
  knopf.transform.baseVal.appendItem(neu);
}

const drehen = (schritt) => {
  const t = knopf.transform.baseVal.getItem(0);
  // angle ist nur lesbar, deshalb setRotate verwenden
  t.setRotate((t.angle + schritt) % 360, 50, 50);
  console.log('Neuer Winkel:', t.angle);
};

knopf.addEventListener('click', () => drehen(30));

Neuer Winkel: 30

// Wichtig · Fallstricke

Nur lesbar: Wenn du t.angle = 90 zuweist, wird das stillschweigend ignoriert (im Strict Mode gibt es einen TypeError). Verwende setRotate(), setSkewX() oder setSkewY().
Matrix-Transformationen: Nach setMatrix() oder SVGTransformList.consolidate() ist der Typ SVG_TRANSFORM_MATRIX und angle liefert 0, auch wenn die Matrix eigentlich eine Drehung beschreibt. Den Winkel musst du dann selbst berechnen, z. B. mit Math.atan2(m.b, m.a) * 180 / Math.PI.
Grad statt Bogenmaß: Die Einheit ist Grad. Für Math.sin/Math.cos musst du den Wert umrechnen.
baseVal und animVal: baseVal enthält den statischen Attributwert. Laufende SMIL-Animationen (<animateTransform>) sind nur in animVal zu sehen.
CSS-Transformationen (style.transform) tauchen in transform.baseVal nicht auf.
Die Eigenschaft funktioniert in allen modernen Browsern. SVGTransformList lässt sich aber nicht überall mit for…of durchlaufen. Am sichersten ist eine Schleife mit numberOfItems und getItem().

Siehe auch

SVGTransform SVGTransform.type SVGTransform.matrix SVGTransform.setRotate() SVGTransform.setSkewX() SVGTransformList SVGSVGElement.createSVGTransform()