SVGTransform.setSkewX() — Methode · JavaScript-Referenz

Signatur

SVGTransform.prototype.setSkewX(angle)

Beschreibung

Die Methode setSkewX() verwandelt ein bestehendes SVGTransform-Objekt in eine Scherung entlang der X-Achse. Danach hat type den Wert SVGTransform.SVG_TRANSFORM_SKEWX (5), angle enthält den übergebenen Winkel und matrix wird auf [1 0 tan(a) 1 0 0] neu berechnet. Das entspricht dem SVG-Attributwert skewX(angle).

Nützlich ist das, wenn man Transformationen eines SVG-Elements programmatisch und ohne String-Verarbeitung ändern will, etwa für schräge Beschriftungen, Kursiv-Effekte an Formen oder Animationen per requestAnimationFrame. Ein neues SVGTransform erhält man über SVGSVGElement.createSVGTransform() und fügt es dann mit SVGTransformList.appendItem() in element.transform.baseVal ein.

Die Methode verändert das Objekt direkt: Ist das SVGTransform bereits Teil der Transformationsliste eines Elements, wird das transform-Attribut sofort aktualisiert und das Element neu gezeichnet.

Parameter

Name	Typ	Default	Beschreibung
$angle Pflicht	number		Scherwinkel in Grad (nicht Bogenmaß). Positive Werte neigen die Oberkante nach rechts (bei nach unten wachsender y-Achse). Wird zu `float` konvertiert.

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Neue Scherung erzeugen und anhängen

const svg = document.querySelector('svg');
const rect = svg.querySelector('rect');

const skew = svg.createSVGTransform();
skew.setSkewX(20);
rect.transform.baseVal.appendItem(skew);

console.log(skew.type === SVGTransform.SVG_TRANSFORM_SKEWX);
console.log(skew.angle);
console.log(rect.getAttribute('transform'));

true 20 skewX(20)

Bestehende Transformation umwandeln

// <text id="label" transform="rotate(45)">Hallo</text>
const label = document.getElementById('label');
const t = label.transform.baseVal.getItem(0);

console.log(t.type); // 4 = SVG_TRANSFORM_ROTATE
t.setSkewX(-15);
console.log(t.type, t.angle);
console.log(t.matrix.c.toFixed(4));

4 5 -15 -0.2679

Wackel-Animation per requestAnimationFrame

const svg = document.querySelector('svg');
const shape = svg.querySelector('#flagge');
const skew = svg.createSVGTransform();
shape.transform.baseVal.appendItem(skew);

const animate = (time) => {
  const angle = Math.sin(time / 300) * 15; // ±15 Grad
  skew.setSkewX(angle);
  requestAnimationFrame(animate);
};
requestAnimationFrame(animate);

// Wichtig · Fallstricke

Grad statt Bogenmaß: Anders als Math.tan() erwartet setSkewX() Grad. Math.PI / 4 ergibt nur ca. 0,785° Scherung.
Winkel nahe ±90 führen zu extrem großen Tangens-Werten; bei genau 90° kann die Darstellung verschwinden oder ungültig werden.
Auf transform.animVal sind die Objekte schreibgeschützt – ein Aufruf wirft einen NoModificationAllowedError. Immer baseVal verwenden.
Die Scherung erfolgt relativ zum Ursprung des Koordinatensystems (0,0), nicht zur Mitte des Elements. Für eine zentrierte Scherung vorher/nachher eine Verschiebung mit setTranslate() einfügen.
Kompatibilität: in allen modernen Browsern unterstützt. Für HTML-Elemente oder CSS-Transformationen stattdessen DOMMatrix.skewXSelf() bzw. CSS transform: skewX() nutzen.

Siehe auch

SVGTransform SVGTransform.setSkewY() SVGTransform.setRotate() SVGTransform.setTranslate() SVGSVGElement.createSVGTransform() SVGTransformList CSSTransformValue.keys()