SVG Path-Animation: Lineart mit CSS

Lineart ist die Bezeichnung für Strichzeichnungen, die nur wenig oder gar nicht koloriert sind. Eine Path-Animation wirkt, als würden sie gerade mit einem Stift gezeichnet – ein schöner Effekt, der technische Zeichnungen verständlicher macht, als Basis für ein animiertes GIF oder Pausenfüller zwischen zwei Absätzen wirkt.

Die Path-Animation entsteht aus der Linie rund um eine Form. Das stroke-Attribut für die Umrandung kann sowohl als Attribut stroke=“blue“ als auch mit CSS style=“stroke:blue“ geschrieben werden. stroke-width ist die Stärke des Strokes. Ähnlich wie der CSS-Wert dotted für border in CSS hat SVG ein Attribut stroke-dasharray, mit dem der Stroke gestrichelt wird. stroke-dasharray kann ebenfalls als CSS-Eigenschaft geschrieben werden.

SVG stroke-dasharray und stroke-dashoffset

dasharray ist die Länge der Striche, dashoffset legt den Anfang der der gestrichelten Linie fest.

.draw {
   stroke-dasharray: 100; 
   animation: dashdraw 3s linear infinite;
}
@keyframes dashdraw {
   to {stroke-dashoffset: 200}
}

Die Striche können beliebig lang werden, und sobald die Striche so lang ist wie der Pfad der Figur, haben wir einen geschlossenen Strich. Wie lang der Pfad ist, stellt ein kurzes Javascript fest.

let draw = document.querySelector('.draw');
const lengthDraw = draw.getTotalLength();
.draw2 {
   stroke-dasharray: 2338.5;
   stroke-dashoffset: 2338.5;
   animation: dash2 3s linear infinite;
}
@keyframes dash2 {
   to { stroke-dashoffset: 0;}
}

Mehrere Animationen in Folge

Selbst bei der Animation von mehreren Pfaden bleibt das CSS überschaubar. CSS-Keyframes-Animationen können jeweils durch ein Komma getrennt in Folge definiert werden.

.bauer {
   animation: strokepath 3s linear forwards, 
              fill 2s 8s forwards;
}
@keyframes strokepath {
   to {stroke-dashoffset: 0 }
} 
@keyframes fill {
   to {fill: hsl(0,0%,90%) }
}

Jede Definition einer Animation braucht einen separaten Keyframe.

Animation starten, wenn sie in den Viewport kommt

Javascript getBoundingClientRect – Position im Browserfenster
Javascript für CSS-Animationen

Browser-Unterstützung

Seitdem die Blink-Entwickler SVG-Animationen mit SMIL lauthals abgesetzt und still wieder eingesetzt haben, stehen wir bei SVG-Animationen vor einem wildgewachsenen Ersatzteillager.

Microsoft hat die Ankündigung genutzt, um alle Aussichten auf eine SMIL-Implementierung sofort von der Speisekarte zu streichen. IE11 und EDGE animieren SVG nur dann, wenn das Attribut als style=““ geschrieben werden kann. Aber nur vielleicht … stroke-dasharray und stroke-dashoffset gehören nicht ins Repertoire. Wenn IE oder EDGE eine Rolle spielen, dann bringt die kleine Javascript-Library Vivus dem SVG-Pfad das Zeichnen bei.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.