Gezeichnete SVG-Pfade mit CSS animieren
In diesem Beitrag lernt ihr, wie ein SVG-Pfad mit CSS-Animationen gezeichnet wird.

Mit SVG/CSS-Animationen lassen sich ansehnliche Effekte erzeugen. Sehr beliebt ist beispielsweise der sog. »Line-Draw-Effect«, bei dem ein Pfad animiert gezeichnet wird. Um den Effekt herzustellen, behilft man sich einem Trick im Zusammenhang mit gestrichelten Linien. In diesem Beitrag erklären wir das Grundprinzip anhand eines leicht nachvollziehbaren Beispiels.
SVG- und CSS-Basisgestaltung
Zunächst muss ein entsprechender SVG-Pfad gezeichnet werden. Dazu kann Illustrator, Inkscape oder ein anderes Vektor-Programm genutzt werden. Was ihr bei der Erstellung von SVG-Grafiken beachten solltet, haben wie hier bereits zusammengefasst.
Das Endergebnis sieht nun wie folgt aus: Innerhalb von <svg>
wird ein Pfad-Objekt (<path>
) erzeugt. Dieser Pfad erhält das Class-Attribut »object
«. Innerhalb des d-Attributs werden die Kurvenpunkte notiert.
<!-- gekürzter Code! --> <svg>
<path class="object" d="M116.6,250c-15.4,43.1-20.6, … "/>
</svg>
Der Pfad erhält über CSS einen transparenten Hintergrund (fill
) eine Kontur-Farbe (stroke
) und eine Kontur-Stärke (stroke-width
).
.object {
fill: none;
stroke: grey;
stroke-width:4;
}
Strichelung und Verschiebung für die Pfadkontur einstellen
Als nächstes kommen die bereits erwähnten gestrichelten Linien zum Einsatz. Wie aus Photoshop oder Illustrator bekannt, kann bei Vektor-Objekten die Kontur gestrichelt dargestellt werden. Es kann sowohl die Länge der Strichelung, als auch die Länge der Abstände zwischen den Strichen festgelegt werden.
- Über die CSS-Eigenschaft
stroke-dasharray
wird festgelegt wie lang die Strichelungen bzw. Abstände zwischen den Strichen sind. - Mit der CSS-Eigenschaft
stroke-dashoffset
wird die Strichelung auf dem Pfad verschoben.
Der Trick funktioniert nun so: Sowohl die Länge der Strichelung (stroke-dasharray
) als auch die Verschiebung mittels stroke-dashoffset
muss so lang sein, wie der Pfad der gezeichnet werden soll. Es entsteht eine gestrichelte Linie mit sichtbaren Segmenten in Länge des Pfads und mit Lücken in Länge des Pfads. Das sichtbare Segment wird nun so verschoben, dass es genau auf dem Pfad sitzt. Ihr seht also keinen Unterschied zu einer nicht-gestrichelten Kontur. Im nächsten Schritt, wird die Kontur auf dem Pfad verschoben, wodurch der gezeichnete Look entsteht.
Länge des SVG-Pfads mit JavaScript ermitteln
Lästig ist, dass ihr wissen müsst wie lang der Pfad ist, damit ihr die Strichelung exakt einstellen könnt. Um die Länge des Pfads in Erfahrung zu bringen kann folgendes JavaScript eingesetzt werden:
var path = document.querySelector('.object');
var length = path.getTotalLength();
console.log(length);
Kopiert das Snippet in einen <script>
-Abschnitt am Ende eures Dokuments. Anschließend steht die Länge des Pfads in der JavaScript-Konsole und kann auf den Code übernommen werden.
Der CSS-Code für das Pfad-Objekt sieht nun so aus:
.object {
stroke:grey;
stroke-width: 4;
stroke-dasharray: 1665.7286376953125;
stroke-dashoffset: 1665.7286376953125;
fill: none;
}
Pfad animieren
Nun kommt die Animation ins Spiel. Mit Hilfe einer CSS-Keyframe-Animation verschieben wir die gestrichelte Kontur auf den Pfad.
.object {
…
animation: dash 2s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Das war auch schon alles. Das fertige Beispiel könnt ihr euch hier anschauen:
Line-Draw-Animation mit vivus.js
Für die Erzeugung von »Line-Draw-Animationen« existieren einige Tools und Libraries. Mit vivus.js kann der Effekt unkompliziert hergestellt werden.
Folgende Schritte müssen beachtet werden:
- SVG zeichnen. Nur
<path>
-Elemente können animiert werden. Die Pfade dürfen keine Füllung beinhalten und nicht geschlossen sein. - SVG inline oder per
<object>
-Tag in das Dokument einbetten - vivus.js herunterladen und einbetten
- vivus.js in eigenem
<script>
-Tag laden und Parameter festlegen
<body>
<svg id="fische-linedraw" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 554.9 242">
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
<script src="vivus.js"></script>
<script>
new Vivus('fische-linedraw', {
type: 'scenario-sync',
duration: 30,
start: 'autostart',
});
</script>
</body>
Kann mir das einer erklären? https://www.revilodesign.de/svg-animationen/ Ich checke das nicht :( Die anderen reagieren nicht und Ihr scheint mir mehr Ahnung zu haben
Hallo Markus, die im Beispiel verwendete Technik ist exakt wie hier im Artikel beschrieben aufgebaut.
Hallo zusammen!
Grundsätzlich funktioniert das wunderbar, danke. Was aber, wenn ich zwei Pfade habe? Also mal angenommen, der Schreiber hätte beim Beispiel „kulturbanause“ den Stift abgesetzt und den t-Strich gemacht oder aber einen verrückten i-Punkt ;)?
Mir ist wichtig, dass es ohne Java-Script läuft.
Viele Grüße
Dennis
Huhu Jonas,
vor der Thematik stand ich auch neulich. Super in dem Zusammenhang ist das DrawSVG Plugin der Greensock Library. Leider nur im Verbund mit der einfachen (aber kostenpflichtigen) Mitgliedschaft erhältlich. Nimmt einem aber viel Arbeit ab.
Liebe Grüße,
Silvia
Diese kostenlose Library ist auch wirklich super für animierte SVG-Grafiken: http://maxwellito.github.io/vivus/