kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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:

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Silvia Ulenberg

    Verfasst am 9. Dezember 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

  2. Dennis

    Verfasst am 21. November 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.