Signatur
Beschreibung
Die Eigenschaft currentTranslate von SVGSVGElement gibt einen Punkt (x, y) zurück, der die aktuelle Verschiebung des Inhalts beschreibt. Zusammen mit currentScale bildet sie die „Benutzer-Transformation“, die ein SVG-Viewer beim Zoomen und Verschieben (Pan) anwendet. Sie wirkt zusätzlich zu viewBox und preserveAspectRatio und wird vor allen anderen Transformationen auf den Inhalt angewendet.
Die Eigenschaft selbst ist schreibgeschützt: Du kannst ihr kein neues Objekt zuweisen. Das zurückgegebene Punkt-Objekt ist jedoch „live“ – in allen gängigen Browsern kannst du seine Eigenschaften x und y direkt setzen und verschiebst damit die Darstellung sofort. Beim wiederholten Lesen erhältst du immer dasselbe Objekt ([SameObject]).
Sinnvoll ist currentTranslate vor allem für einfache Pan-/Zoom-Funktionen in eigenständigen SVG-Dokumenten oder großen Inline-Grafiken (Karten, Diagramme), wenn man den viewBox nicht manipulieren möchte. Wichtig: Die Eigenschaft hat nur für das äußerste <svg>-Element Wirkung; bei verschachtelten <svg>-Elementen bleibt sie ohne Effekt.
Rückgabewert
x und y (Standard: 0, 0), das die aktuelle Verschiebung in Bildschirm-Einheiten (CSS-Pixel) angibt. Änderungen an x/y verschieben die Darstellung des äußersten <svg>-Elements.Beispiele
Aktuelle Verschiebung auslesen
const svg = document.querySelector('svg');
const { x, y } = svg.currentTranslate;
console.log(`Verschiebung: ${x}, ${y}`);
console.log(svg.currentTranslate === svg.currentTranslate);Grafik per Skript verschieben
const svg = document.querySelector('svg');
// Das Objekt selbst ist nicht ersetzbar, aber x/y sind änderbar
svg.currentTranslate.x = 50;
svg.currentTranslate.y = -20;
console.log(svg.currentTranslate.x, svg.currentTranslate.y);Pan mit der Maus (Drag) umsetzen
const svg = document.querySelector('svg');
let start = null;
svg.addEventListener('pointerdown', (e) => {
start = {
x: e.clientX - svg.currentTranslate.x,
y: e.clientY - svg.currentTranslate.y,
};
svg.setPointerCapture(e.pointerId);
});
svg.addEventListener('pointermove', (e) => {
if (!start) return;
svg.currentTranslate.x = e.clientX - start.x;
svg.currentTranslate.y = e.clientY - start.y;
});
svg.addEventListener('pointerup', () => { start = null; });Zoom um den Mauszeiger mit currentScale kombinieren
const svg = document.querySelector('svg');
svg.addEventListener('wheel', (e) => {
e.preventDefault();
const oldScale = svg.currentScale;
const newScale = Math.min(10, Math.max(0.2, oldScale * (e.deltaY < 0 ? 1.1 : 0.9)));
const rect = svg.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
const t = svg.currentTranslate;
// Punkt unter dem Mauszeiger soll an Ort und Stelle bleiben
t.x = mx - (mx - t.x) * (newScale / oldScale);
t.y = my - (my - t.y) * (newScale / oldScale);
svg.currentScale = newScale;
}, { passive: false });// Wichtig · Fallstricke
- Nur äußerstes
<svg>: Bei verschachtelten<svg>-Elementen hat eine Änderung keine sichtbare Wirkung. - Keine Zuweisung:
svg.currentTranslate = {x: 10, y: 10}wird ignoriert (im Strict Mode ggf.TypeError). Ändere stattdessenxundydes zurückgegebenen Objekts. - Einheiten: Die Werte sind in Bildschirm-/CSS-Pixeln, nicht in
viewBox-Benutzereinheiten. Für Koordinatenumrechnungen bessergetScreenCTM()nutzen, die die Benutzer-Transformation bereits berücksichtigt. - Typ je Browser: Ältere Engines liefern ein
SVGPoint, neuere einDOMPoint(SVG 2 machtSVGPointzum Alias). Der Zugriff aufx/yfunktioniert überall gleich. - Für Inline-SVG in HTML ist die Manipulation von
viewBoxoder einestransformauf einer Wurzel-<g>oft robuster und besser vorhersagbar alscurrentTranslate/currentScale.