SVGTransform.setSkewY() — Methode · JavaScript-Referenz

Signatur

SVGTransform.prototype.setSkewY(angle)

Beschreibung

setSkewY() überschreibt ein vorhandenes SVGTransform-Objekt komplett mit einer Schrägstellung entlang der Y-Achse. Danach gilt: type ist SVGTransform.SVG_TRANSFORM_SKEWY (Wert 6), angle enthält den übergebenen Winkel und matrix entspricht [a=1, b=tan(angle), c=0, d=1, e=0, f=0]. Senkrechte Linien bleiben senkrecht. Waagerechte Kanten kippen dagegen umso stärker, je weiter rechts sie liegen.

Die Methode ist das Gegenstück in JavaScript zur Attribut-Syntax transform="skewY(30)". Du nutzt sie, wenn du Transformationen über das SVG-DOM bearbeiten willst, ohne Zeichenketten zu verketten und zu parsen. Das ist besonders praktisch bei Animationen oder interaktiven Editoren. Ein neues Transform-Objekt erzeugst du normalerweise mit SVGSVGElement.createSVGTransform(), setzt dann den Typ und fügst das Objekt in element.transform.baseVal ein.

Gehört das Objekt schon zur transform.baseVal-Liste eines Elements, wirkt jede Änderung per setSkewY() sofort. Das Attribut transform wird automatisch neu geschrieben. Ein zweites Objekt oder ein erneutes Setzen des Attributs brauchst du dafür nicht.

Parameter

Name	Typ	Default	Beschreibung
$angle Pflicht	number		Winkel der Schrägstellung in Grad (nicht im Bogenmaß). Positive Werte kippen die Form im SVG-Koordinatensystem (Y zeigt nach unten) im Uhrzeigersinn, negative Werte gegen den Uhrzeigersinn.

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Neue Schrägstellung erzeugen und an ein Rechteck anhängen

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

// Leeres Transform-Objekt erzeugen (Typ: MATRIX, Einheitsmatrix)
const skew = svg.createSVGTransform();
skew.setSkewY(30);

rect.transform.baseVal.appendItem(skew);

console.log(skew.type === SVGTransform.SVG_TRANSFORM_SKEWY);
console.log(skew.angle);
console.log(skew.matrix.b.toFixed(3));
console.log(rect.getAttribute('transform'));

true 30 0.577 skewY(30)

Schrägstellung per Schieberegler live anpassen

// HTML: <input type="range" id="skew" min="-60" max="60" value="0">
const svg = document.querySelector('svg');
const shape = document.querySelector('#flagge');
const slider = document.querySelector('#skew');

// Ein einziges Transform-Objekt anlegen und danach nur noch ändern
const skew = svg.createSVGTransform();
shape.transform.baseVal.appendItem(skew);

slider.addEventListener('input', () => {
  skew.setSkewY(Number(slider.value));
});

Wehende Fahne mit requestAnimationFrame

const svg = document.querySelector('svg');
const flag = document.querySelector('#flagge');

const skew = svg.createSVGTransform();
flag.transform.baseVal.appendItem(skew);

const animate = (time) => {
  // Winkel pendelt zwischen -10° und +10°
  const angle = Math.sin(time / 400) * 10;
  skew.setSkewY(angle);
  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);

Vorhandene Transformation umwandeln

// <rect transform="rotate(45)" ...>
const rect = document.querySelector('rect');
const first = rect.transform.baseVal.getItem(0);

console.log(first.type); // 4 = SVG_TRANSFORM_ROTATE
first.setSkewY(-20);
console.log(first.type, first.angle);
console.log(rect.getAttribute('transform'));

4 6 -20 skewY(-20)

// Wichtig · Fallstricke

Grad statt Bogenmaß: angle wird in Grad angegeben. Das ist anders als bei Math.sin() und ähnlichen Funktionen. Ein Wert von Math.PI / 6 ergibt deshalb nur etwa 0,52°.
Werte nahe ±90°: tan(90°) geht gegen unendlich. Die Form wird dann extrem verzerrt oder verschwindet. Begrenze den Winkel am besten auf einen sinnvollen Bereich, etwa −80° bis 80°.
Nur-lesbare Objekte: Auf Transformationen aus transform.animVal oder auf Objekten aus SVGMatrix-Ableitungen, die nur gelesen werden dürfen, wirft der Aufruf eine NoModificationAllowedError-DOMException. Ändere immer baseVal.
Reihenfolge zählt: Die Transformationen einer SVGTransformList werden von links nach rechts verkettet. skewY vor oder nach translate/rotate führt deshalb zu unterschiedlichen Ergebnissen.
Kein Drehpunkt: Die Schrägstellung wirkt immer relativ zum Ursprung (0,0) des lokalen Koordinatensystems. Soll sie um einen anderen Punkt wirken, rahme sie mit translate-Transformationen ein. Eine Alternative ist CSS transform: skewY() zusammen mit transform-origin.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Für einfache Fälle ist CSS transform auf SVG-Elementen oft bequemer. Das SVG-DOM bietet dafür präzisen, typisierten Zugriff ohne Zeichenketten-Parsing.

Siehe auch

SVGTransform SVGTransform.setSkewX() SVGTransform.setRotate() SVGTransform.setTranslate() SVGTransform.setMatrix() SVGSVGElement.createSVGTransform() SVGTransformList