SVGTransform.setScale() — Methode · JavaScript-Referenz

Signatur

SVGTransform.prototype.setScale(sx, sy)

Beschreibung

Mit setScale() machst du aus einem bestehenden SVGTransform-Objekt eine Skalierung. Danach hat type den Wert SVGTransform.SVG_TRANSFORM_SCALE (3), und die Matrix (matrix) entspricht [sx 0 0 sy 0 0]. Das ist dasselbe wie scale(sx, sy) im transform-Attribut.

Die Methode ist nützlich, wenn du Transformationen über das SVG-DOM bearbeiten willst, statt Attribut-Strings zusammenzubauen und neu zu parsen. Das ist vor allem bei Animationen, beim Zoomen oder in Editoren praktisch, in denen einzelne Einträge einer SVGTransformList gezielt geändert werden.

Ein neues SVGTransform legst du mit svgRoot.createSVGTransform() an. Danach konfigurierst du es mit setScale() und hängst es mit element.transform.baseVal.appendItem() an. Ist das Transform bereits Teil einer Liste, wirkt die Änderung sofort auf das Element und auf sein transform-Attribut.

Anders als in der Attribut-Syntax musst du hier beide Faktoren angeben. Für eine gleichmäßige Skalierung übergibst du also zweimal denselben Wert.

Parameter

Name	Typ	Default	Beschreibung
$sx Pflicht	number		Skalierungsfaktor in x-Richtung. `1` = unverändert, `2` = doppelt so breit, negative Werte spiegeln horizontal.
$sy Pflicht	number		Skalierungsfaktor in y-Richtung. Muss immer angegeben werden, auch bei gleichmäßiger Skalierung.

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Neue Skalierung an ein Element anhängen

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

// Neues Transform-Objekt erzeugen und als Skalierung konfigurieren
const t = svg.createSVGTransform();
t.setScale(2, 1.5);

rect.transform.baseVal.appendItem(t);

console.log(t.type === SVGTransform.SVG_TRANSFORM_SCALE);
console.log(rect.getAttribute('transform'));

true scale(2 1.5)

Matrix nach setScale() prüfen

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

t.setScale(3, 0.5);
const { a, b, c, d, e, f } = t.matrix;
console.log(a, b, c, d, e, f);

3 0 0 0.5 0 0

Zoom per Mausrad mit bestehendem Transform

const svg = document.querySelector('svg');
const group = svg.querySelector('#inhalt');

// Ein wiederverwendbares Skalierungs-Transform anlegen
const zoom = svg.createSVGTransform();
zoom.setScale(1, 1);
group.transform.baseVal.appendItem(zoom);

let factor = 1;
svg.addEventListener('wheel', (event) => {
  event.preventDefault();
  factor *= event.deltaY < 0 ? 1.1 : 1 / 1.1;
  factor = Math.min(Math.max(factor, 0.2), 5);
  zoom.setScale(factor, factor); // wirkt sofort auf das Element
}, { passive: false });

Element horizontal spiegeln

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

const flip = svg.createSVGTransform();
flip.setScale(-1, 1);
icon.transform.baseVal.appendItem(flip);

console.log(icon.getAttribute('transform'));

scale(-1 1)

// Wichtig · Fallstricke

Skaliert um den Ursprung: Die Skalierung bezieht sich auf den Punkt (0,0) des aktuellen Koordinatensystems, nicht auf die Mitte des Elements. Wenn du um einen anderen Punkt skalieren willst, kombinierst du sie mit setTranslate()-Transforms davor und danach (translate(cx,cy) · scale · translate(-cx,-cy)).
Beide Parameter sind Pflicht: Rufst du setScale(2) nur mit einem Argument auf, löst das einen TypeError aus. Anders als bei scale(2) im Attribut wird der Wert nicht automatisch für y übernommen.
Linienstärke wird mitskaliert: Auch stroke-width wird größer oder kleiner. Mit vector-effect: non-scaling-stroke verhinderst du das.
Ein Wert von 0 ist erlaubt, macht das Element aber unsichtbar und die Matrix nicht invertierbar. Das kann bei getScreenCTM().inverse() Probleme verursachen.
Änderungen an animVal sind schreibgeschützt. Ändere Transforms immer über transform.baseVal.
Die Methode wird von allen modernen Browsern unterstützt. CSS-Transforms (style.transform) werden von SVGTransformList nicht erfasst.

Siehe auch

SVGTransform SVGTransform.setTranslate() SVGTransform.setRotate() SVGTransform.setMatrix() SVGTransformList SVGSVGElement.createSVGTransform() Selection.collapseToStart()