Gezeichnete SVG-Pfade mit CSS animieren

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.

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:

Beispiel 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:

  1. SVG zeichnen. Nur <path>-Elemente können animiert werden. Die Pfade dürfen keine Füllung beinhalten und nicht geschlossen sein.
  2. SVG inline oder per <object>-Tag in das Dokument einbetten
  3. vivus.js herunterladen und einbetten
  4. vivus.js in eigenem <script>-Tag laden und Parameter festlegen
<body>

<svg id="fische-linedraw" xmlns="http://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>

Beispiel anschauen

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Markus
    schrieb am 14.02.2018 um 15:33 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 21.02.2018 um 05:44 Uhr:

      Hallo Markus, die im Beispiel verwendete Technik ist exakt wie hier im Artikel beschrieben aufgebaut.

      Antworten
  2. Dennis
    schrieb am 21.11.2016 um 14:04 Uhr:

    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

    Antworten
  3. Silvia Ulenberg
    schrieb am 09.12.2015 um 17:30 Uhr:

    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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →