SVGs mit CSS Transform animieren – eine schwierige Angelegenheit?
Kommentare

Die Nutzung von SVGs im Web nimmt erst seit einiger Zeit so richtig zu– zu Recht. Bilder im SVG-Format bieten viele Vorteile, angefangen von ihrer geringeren Größe bis hin zu der Tatsache, dass sie sich durch ihre Skalierbarkeit für Responsive Webdesign und die Darstellung auf hochauflösenden Displays eignen.

Während der Browser-Support für SVGs im Allgemeinen überaus gut ist, sieht dieser allerdings bei der Animation von SVGs mit CSS Transform eher mager aus. Jack Doyle spricht einige Probleme bei der Nutzung von SVGs mit CSS Transforms an und zeigt, wie sich das Verhalten in verschiedenen Browsern vereinheitlichen lässt.

Viele Browser, keine Einheitlichkeit bei Animation von SVGs mit CSS Transforms

Eines der größten Probleme bei der Nutzung von SVGs mit CSS Transforms ist die Uneinheitlichkeit, wie die verschiedenen Browser mit CSS-Transforms-Animationen von SVGs umgehen. So kann CSS Transform im Internet Explorer und Opera gar nicht auf SVGs angewandt werden, im Firefox und Safari gibt es Probleme mit prozentbasierten Ursprüngen, und in allen Browsern werden pixelbasierte Ursprünge für SVG-Elemente anders gemessen, als für andere DOM-Elemente.

Das bedeutet insbesondere, dass das gleiche CSS nicht auf ein reguläres DOM-Element und ein SVG-Element angewandt werden kann, um das gleiche Verhalten bei beiden Elementen hervorzurufen. Stattdessen müssen die Koordinaten für zentrierte SVG-Elemente ausgerechnet und dann auf diese angewandt werden.

Wie also lassen sich Transform-Properties von SVG-Elemente analog zu anderen DOM-Elementen animieren, sodass sie dabei in allen Browsern ein identisches Verhalten an den Tag legen? Eine reine CSS-Lösung gibt es für das Problem nicht, stattdessen kann der Einsatz von JavaScript Abhilfe schaffen.

Problemlösung JavaScript

Die GreenSock Animation Platform (GSAP) kalkuliert automatisch den Unterschied zwischen den SVG-0,0-Koordinaten und dem gewünschten Transform-Ursprung, ändert den Transform-Ursprung und updatet den Transform-Wert, bevor das zu animierende Element mit dem gewünschten Ursprung ausgerichtet wird. Dadurch wird das Verhalten in den verschiedenen Browsern vereinheitlich; zudem gibt es keinen Unterschied mehr zwischen dem Verhalten von SVGs und anderen DOM-Elementen in der Animation.

Natürlich ist dies nur ein kleiner Einblick in die Schwierigkeiten, die die Animation von SVGs in verschiedenen Browsern verursachen kann. Jack Doyle erklärt dies ausführlicher und mit Beispielen in seinem Artikel; dort finden sich auch weitere Tipps zur Arbeit mit der GSAP.

Es zeigt sich dabei allerdings vor allem eins: Die Verbindung von SVGs und CSS-Transforms mag zwar keine einfache Aufgabe sein, ist aber auch nicht unlösbar – und sind die Probleme erstmal überwunden, bietet die Animation von SVGs zahlreiche Möglichkeiten, die den Einsatz des Bildformats für Webdesigner noch interessanter machen.

Aufmacherbild: toy cube on with blue background von Shutterstock / Urheberrecht: charles taylor

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -