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.

18-12-15 SITEMAP

stroke

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 viewBox="0 0 742.1 874.8" height="100%" width="100%">
    <style>
       .draw {stroke-dasharray: 100; animation: dashdraw 4s linear infinite;}
       @keyframes dashdraw {to {stroke-dashoffset: 200;}}
    </style>
    <path class="draw" stroke-linejoin="round" stroke="darkslategray" fill="none" stroke-width="10" d="m371.4 138a142.5 142.5 0 0 0 -142.4 142.8 142.5 142.5 0 0 0 72 123.4l-88.8 241.7h-114.4v150h547.2v-150h-114l-88.9-241.7a142.5 142.5 0 0 0 72.4 -123.4 142.5 142.5 0 0 0 -143.1 -142.8z"/>
 </svg>

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();

Das Script stellt nur fest, wie lang der Pfad ist und wird anschließend nicht mehr gebraucht. Die Animation beruht nur auf CSS Keyframes.

Get the length of a SVG line,rect,polygon and circle tags auf Stack Overflow.

.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: Wenn die SVG-Animation als externe SVG-Datei in einem img-Tag geladen wird, erledigt das loading=“lazy“. Dabei ist erledigt leider kein gutes Omen, denn bis das Bild in voller Höhe sichtbar ist, kann die Animation schon abgelaufen sein.

Javascript getBoundingClientRect – Position im Browserfenster
ist ein inzwischen veralteter Ansatz, heute passt Javascript den Start der Animation besser mit dem Intersection Observer an.

Browser-Unterstützung

Nachdem die Blink-Entwickler SVG-Animationen mit SMIL lauthals abgesetzt und still wieder eingesetzt haben, hatten wir bei SVG-Animationen ein wildgewachsendes Ersatzteillager oder fielen der Überwältigung durch Javascript-Libraries zum Opfer.

Microsoft hatte die Ankündigung genutzt, um alle Aussichten auf eine SMIL-Implementierung sofort von der Speisekarte zu streichen. IE11 animierte SVG nur, wenn das Attribut als style=““ geschrieben werden kann. Aber nur vielleicht … stroke-dasharray und stroke-dashoffset gehören nicht ins Repertoire der style-fähigen SVG-Attribute.

Aber das Raus und Rein hat sich jetzt allem Anschein nach um „Doch wieder drin“ gewendet. Seit 2020 gehört Microsoft EDGE zur Blink-Familie und zeigt SMIL-Animationen, IE11 ist versunken. Heute unterstützen alle modernen Browser SVG SMIL – Animation auf SVG-Basis.

Externe Quellen

2019-11-16 SITEMAP BLOG