SVGTransform.setRotate() — Methode · JavaScript-Referenz

Signatur

SVGTransform.prototype.setRotate(angle, cx, cy)

Beschreibung

Mit setRotate() wird ein bestehendes SVGTransform-Objekt in eine Rotation umgewandelt. Der Typ der Transformation (type) wird auf SVGTransform.SVG_TRANSFORM_ROTATE (Wert 4) gesetzt, angle wird auf den übergebenen Winkel gesetzt und die Matrix (matrix) entsprechend neu berechnet. Das entspricht dem Attributwert rotate(angle cx cy) im transform-Attribut.

Der Drehpunkt (cx, cy) wird im Nutzerkoordinatensystem des Elements angegeben. Die Rotation um einen beliebigen Punkt entspricht der Folge translate(cx, cy) rotate(angle) translate(-cx, -cy). Es wird trotzdem nur ein Transformationseintrag erzeugt.

Typischerweise nutzt man die Methode zusammen mit SVGTransformList: Man erzeugt über svgRoot.createSVGTransform() ein neues Objekt, ruft setRotate() auf und hängt es mit appendItem() an element.transform.baseVal an. Alternativ ändert man eine vorhandene Transformation direkt. Dann aktualisiert sich das transform-Attribut im DOM sofort mit. Das ist praktisch für Animationen per requestAnimationFrame, weil keine Zeichenketten zusammengebaut und geparst werden müssen.

Parameter

Name	Typ	Beschreibung
$angle Pflicht	number	Drehwinkel in Grad (nicht Bogenmaß). Positive Werte drehen im SVG-Koordinatensystem im Uhrzeigersinn.
$cx Pflicht	number	x-Koordinate des Drehpunkts im Nutzerkoordinatensystem. Für eine Drehung um den Ursprung `0` übergeben.
$cy Pflicht	number	y-Koordinate des Drehpunkts im Nutzerkoordinatensystem. Für eine Drehung um den Ursprung `0` übergeben.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das SVGTransform-Objekt wird direkt verändert.

Beispiele

Rechteck um seinen Mittelpunkt drehen

const svg = document.querySelector('svg');
const rect = document.querySelector('#box'); // <rect x="50" y="50" width="100" height="60"/>

const t = svg.createSVGTransform();
t.setRotate(45, 100, 80); // Mittelpunkt: x+w/2, y+h/2
rect.transform.baseVal.appendItem(t);

console.log(rect.getAttribute('transform'));
console.log(t.type === SVGTransform.SVG_TRANSFORM_ROTATE, t.angle);

rotate(45 100 80) true 45

Drehpunkt automatisch aus der Bounding-Box ermitteln

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

const rotateAroundCenter = (el, deg) => {
  const { x, y, width, height } = el.getBBox();
  const t = svg.createSVGTransform();
  t.setRotate(deg, x + width / 2, y + height / 2);
  // Vorhandene Transformationen ersetzen
  el.transform.baseVal.initialize(t);
};

rotateAroundCenter(icon, 90);

Flüssige Rotationsanimation ohne String-Parsing

const svg = document.querySelector('svg');
const wheel = document.querySelector('#wheel'); // <circle cx="150" cy="150" r="40"/>

const t = svg.createSVGTransform();
wheel.transform.baseVal.initialize(t);

const spin = (time) => {
  const angle = (time / 10) % 360; // 36 Grad pro Sekunde
  t.setRotate(angle, 150, 150);    // Dasselbe Objekt wird aktualisiert
  requestAnimationFrame(spin);
};
requestAnimationFrame(spin);

Matrix nach setRotate() auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const t = svg.createSVGTransform();
t.setRotate(90, 0, 0);

const { a, b, c, d, e, f } = t.matrix;
console.log([a, b, c, d, e, f].map((n) => Math.round(n)));

[0, 1, -1, 0, 0, 0]

// Wichtig · Fallstricke

Grad statt Bogenmaß: Anders als Math.sin()/Math.cos() erwartet setRotate() den Winkel in Grad. Werte aus Bogenmaß mit rad * 180 / Math.PI umrechnen.
Alle drei Argumente sind Pflicht: Laut WebIDL sind cx und cy nicht optional. Fehlen sie, wirft der Aufruf einen TypeError. Für eine Drehung um den Ursprung 0, 0 übergeben.
Schreibgeschützte Listen: Transformationen aus animVal sind schreibgeschützt. Ein Aufruf darauf wirft eine NoModificationAllowedError-DOMException. Immer über baseVal arbeiten.
Neuer Typ: Nach dem Aufruf ist type immer SVG_TRANSFORM_ROTATE, auch wenn das Objekt vorher etwa eine Skalierung war. Den Drehpunkt kann man später nicht mehr direkt auslesen, nur angle und matrix.
Reihenfolge: In einer SVGTransformList hängt das Ergebnis von der Reihenfolge der Einträge ab. Eine Rotation vor oder nach einer Verschiebung ergibt verschiedene Bilder.
Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt (SVG 1.1). CSS-Transformationen (style.transform) sind davon unabhängig und können das transform-Attribut überlagern.

Siehe auch

SVGTransform SVGTransform.setTranslate() SVGTransform.setScale() SVGTransform.setMatrix() SVGTransform.angle SVGTransformList SVGSVGElement.createSVGTransform() SVGGraphicsElement.getBBox()