CSS-Tricks beschreibt eine Technik für animierte SVG-Datenvisualisierungen, bei der JavaScript den sichtbaren Ausschnitt eines Bildes über die viewBox verändert. Die Grafik bleibt dabei ein SVG, während sich der Bereich mit den relevanten Informationen vergrößert oder verschiebt.
Die viewBox legt mit vier Werten den Koordinatenraum eines SVG fest: min-x, min-y, Breite und Höhe. Wird sie während der Laufzeit angepasst, kann eine Anwendung von einer Gesamtansicht in eine Detailansicht wechseln. Das Muster ist für interaktive Medien, Karten und technische Oberflächen interessant.
getBBox liefert den passenden Ausschnitt
Für die Berechnung muss der relevante SVG-Bereich nicht von Hand vermessen werden. Die Methode getBBox() liefert die Koordinaten und Abmessungen des umschließenden Rechtecks. Diese Werte lassen sich zu einer neuen viewBox-Zeichenkette zusammensetzen und anschließend mit setAttribute("viewBox", newView) auf das SVG anwenden.
Animation mit JavaScript oder GSAP
Für den Übergang kann JavaScript die Koordinaten über requestAnimationFrame schrittweise ändern. Alternativ animiert das GreenSock-Attributmodul die Werte und übernimmt die zeitliche Kurve. Die Beispiele des Beitrags zeigen unter anderem eine interaktive Karte, bei der ein Klick auf eine Region den Ausschnitt verschiebt und zusätzliche Informationen einblendet.
Für technische Teams ist die Trennung aus Vektordaten, Ausschnitt und Interaktion praktisch: Die Grafik bleibt skalierbar, während die Oberfläche nur den sichtbaren Bereich neu setzt. In interaktiven Anwendungen kann derselbe Ansatz für Karten, Diagramme oder fokussierte Informationsansichten verwendet werden.
