SVGSVGElement.currentScale — Eigenschaft · JavaScript-Referenz

Signatur

SVGSVGElement.currentScale

Beschreibung

Die Eigenschaft currentScale der Schnittstelle SVGSVGElement gibt den aktuellen Skalierungsfaktor an, mit dem ein SVG-Dokument relativ zu seiner Anfangsansicht dargestellt wird. Zusammen mit currentTranslate beschreibt sie die „Benutzeransicht“, also Zoom und Verschiebung, die ein Benutzer (oder ein Skript) auf das Dokument angewendet hat.

Wirksam ist die Eigenschaft nur auf dem äußersten <svg>-Element eines Dokuments, z. B. wenn eine SVG-Datei direkt im Browser geöffnet oder über <object>/<iframe> eingebunden wird. Bei verschachtelten <svg>-Elementen hat das Setzen keinen Effekt. Die Transformation wird zusätzlich zu viewBox und preserveAspectRatio angewendet und wirkt sich nicht auf das DOM der Kindelemente aus.

Typische Einsatzzwecke sind einfache Zoom-Steuerungen für eigenständige SVG-Grafiken (Karten, Diagramme) oder das Umrechnen von Bildschirm- in SVG-Koordinaten, wenn der Benutzer gezoomt hat. Für komplexe Zoom-/Pan-Logik innerhalb von HTML-Seiten ist die Manipulation von viewBox oder CSS-transform meist zuverlässiger.

Parameter

Name	Typ	Default	Beschreibung
$value	number	1	Beim Setzen: neuer Skalierungsfaktor (Gleitkommazahl). `1` entspricht der Originalgröße, `2` doppelter Vergrößerung, `0.5` halber Größe.

Rückgabewert

Typ

number

Beschreibung

Der aktuelle Skalierungsfaktor als Gleitkommazahl; 1, wenn nicht gezoomt wurde.

Beispiele

Aktuellen Zoomfaktor auslesen

// In einer eigenständigen SVG-Datei oder Seite mit äußerstem <svg>
const svg = document.querySelector('svg');
console.log(`Aktueller Zoom: ${svg.currentScale}`);

Aktueller Zoom: 1

Zoom-Schaltflächen für eine SVG-Grafik

const svg = document.documentElement; // in einer .svg-Datei das Wurzelelement

const zoom = (faktor) => {
  const neu = Math.min(8, Math.max(0.25, svg.currentScale * faktor));
  svg.currentScale = neu;
  console.log(`Zoom: ${neu.toFixed(2)}`);
};

document.getElementById('zoom-in').addEventListener('click', () => zoom(1.25));
document.getElementById('zoom-out').addEventListener('click', () => zoom(0.8));
document.getElementById('reset').addEventListener('click', () => {
  svg.currentScale = 1;
  svg.currentTranslate.x = 0;
  svg.currentTranslate.y = 0;
});

Zoom: 1.25

Mausposition unter Berücksichtigung von Zoom und Verschiebung umrechnen

const svg = document.documentElement;

svg.addEventListener('click', (event) => {
  const { currentScale: s, currentTranslate: t } = svg;
  const x = (event.clientX - t.x) / s;
  const y = (event.clientY - t.y) / s;
  console.log(`Klick bei Benutzerkoordinaten (${x.toFixed(1)}, ${y.toFixed(1)})`);
});

Klick bei Benutzerkoordinaten (120.0, 45.5)

// Wichtig · Fallstricke

Nur äußerstes <svg>: Auf verschachtelten oder in HTML inline eingebetteten <svg>-Elementen wird der Wert in einigen Browsern zwar gespeichert, hat aber keine sichtbare Wirkung. Das Verhalten bei Inline-SVG in HTML unterscheidet sich je nach Browser.
Der Browser-Zoom (Strg/Cmd + Plus) ändert currentScale normalerweise nicht. Für den Seitenzoom eignet sich eher window.devicePixelRatio oder visualViewport.scale.
Das früher vorgesehene SVGZoom-Ereignis (onzoom) wurde aus SVG 2 entfernt. Änderungen an currentScale lösen kein Ereignis aus.
Werte ≤ 0 sind nicht sinnvoll und sollten per Clamping verhindert werden.
Für robuste Zoom-/Pan-Funktionen in HTML-Seiten besser viewBox anpassen oder mit getScreenCTM() umrechnen.

Siehe auch

SVGSVGElement SVGSVGElement.currentTranslate SVGGraphicsElement.getScreenCTM() SVGSVGElement.createSVGPoint() PerformanceTiming.connectStart ScreenDetails.currentScreen