SVG Pfade animiert zeichnen mit CSS
Mit CSS-basierten deklarativen Animationen lassen sich mit minimalem Aufwand HTML-Elemente animieren. Man kann CSS Animationen aber nicht nur auf HTML anwenden, das funktioniert auch mit SVG. In diesem Mini-Tutorial zeige ich, wie man damit einen Text animiert erscheinen lassen kann.
Die Basis für diesen Effekt ist ein raffinierter Hack, den ich im Blog von Jake Archibald gefunden habe. In seinem Blogartikel Animated line drawing in SVG zeigt er, wie man SVG-Pfade mithilfe von CSS animiert aufbauen lassen. Der Trick beruht darauf, dass man für SVG-Pfade ein stroke-dasharray-Attribut angeben kann. Mit diesem Attribut kann man festlegen, wie lange die Pfadsegmente eines Stroke (der Aussenlinie des Pfades) sein sollen.
Damit der Hack funktioniert muss, beschränken wir uns auf ein einziges Pfadsegment und machen es genauso lang wie den Pfad selbst. Dessen länge können wir mithilfe von JavaScript ermitteln:
See the Pen oVWEbw by Anton Epple (@monacotoni) on CodePen.
Um die Linie anfangs zu verbergen, verschieben wir sie mittels des dash-arrayoffset einfach aus dem Bild. dazu müssen wir lediglich die negative Länge der Linie als Wert verwenden.
See the Pen drWdVJ by Anton Epple (@monacotoni) on CodePen.
Als letzten Schritt animieren wir den dash-arrayoffset von der negativen Länge nach 0 mit einer @keyframe animation.
See the Pen bZWLvy by Anton Epple (@monacotoni) on CodePen.
Um diesen Effekt auf einen Text anzuwenden muss dieser zunächst in einen Pfad umgewandelt werden, zum Beispiel mit Inkscape. Einfach in Inkscape den Text auswählen und dann im Menü die Aktion "Pfad"->"Objekt in Pfad umwandeln" aufrufen und anschliessend als "Optimiertes SVG" speichern.
Im nächsten Beispiel wende ich die Animation auf alle Buchstaben gleichzeitig an, indem ich die Klasse auf das parent SVG-Element anwende.
See the Pen LayjEP by Anton Epple (@monacotoni) on CodePen.
Wer die Buchstaben lieber einen nach dem anderen erscheinen lassen möchte, kann für die jeden Buchstaben ein delay setzen. Das geht am einfachsten mit ein wenig SCSS. Wichtig ist auch, den animation-fill-mode zu setzen, sodass der endgültige Wert des dash-arrayoffset (0) bestehen bleibt. Sonst verschwindet der Buchstabe gleich wieder, weil der Wert auf den Initialwert (negative Länge) zurückspringt:
See the Pen XGRZwg by Anton Epple (@monacotoni) on CodePen.
Viel Spaß beim animieren. Mehr HTML, CSS und SVG gibt es in folgenden Artikeln:
Wie führe ich Code am Ende einer CSS-Animation aus?
Wie deaktivere ich den Browser Cache für Javascript