SVG Path-Animation: Lineart mit CSS

stroke – Strich oder Rahmen

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. Die Länge des Pfads rund um ein Rechteck oder einen Kreis ist etwas Rechenarbeit. Für eine beliebige Form übernimmt das ein kurzes Javascript.

const 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.

Aber das Raus und Rein hat sich jetzt zu „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.

SVG-SMIL vs SVG-Animationen mit CSS

Kleine Animationen lassen sich ebenso gut mit CSS-Keyframes in Gang setzen. Sobald mehrere Elemente in Abhängigkeit voneinander animiert werden, fehlen uns bei CSS die Mittel, die Elemente miteinander zu synchronisieren. Starte Animation B und C eine Sekunde bevor Animation A beendet ist – das ist in SMIL einfacher, denn SMIL erkennt Aktionen und Abhängigkeiten.

<animate attributeType="XML"
	xlink:href="#circle1"
	attributeName="stroke-dashoffset" 
	from="0" to="628.32" 
	dur="1.5s"
	begin="rectstroke.end"  
	fill="freeze"/>

Die Animation eines SVG-Elements kann eine Aktion eines anderen Elements in Gang setzen: SVG SMIL Animationen – Events und Synchronisation.

Mehr zu SVG-Animationen

• SVG transform Rotieren, Skalieren, einfach verschieben oder verzerren
• SVG Pfade – Wie entsteht eine Bezier-Kurve?
• SVG use Formen oder ganze Gruppen von SVG-Elementen mehrfach verwenden
• SVG style-Attribut, style Tag und Media Queries