Ein Trick, der das Zeichnen von SVG-Linien viel einfacher macht

Beim Zeichnen von Linien mit SVG haben Sie oft ein <path>-Element mit einem stroke. Sie setzen ein stroke-dasharray, das so lang ist wie der Pfad selbst, sowie einen stroke-offset, der so weit reicht, dass der gesamte gestrichene Pfad anfänglich versteckt erscheint. Dann animieren Sie den stroke-offset zurück auf 0, damit Sie zusehen können, wie die Form „gezeichnet“ wird.

Die Länge des Pfades herauszufinden, ist der Trick, den Sie glücklicherweise in JavaScript tun können, indem Sie den Pfad auswählen und pathEl.getTotalLength() ausführen. Es wird wahrscheinlich eine komische Dezimalzahl sein. Ein bisschen schade, dass wir das nicht in CSS bekommen können, aber c'est la vie.

Hier ist der Trick!

Sie müssen die Länge des Pfades nicht messen, weil Sie sie festlegen können.

Also machen Sie wie

<path d="M66.039,133.545 ... " pathLength="1" />

Das bewirkt an sich nichts (soweit ich weiß). Es zeichnet nicht nur einen Teil des Pfades – es zeichnet immer noch den gesamten Pfad, als hätten Sie nichts getan, nur dass die „Mathematik“ der Pfadlänge jetzt auf einem Wert von 1 basiert.

Jetzt können wir das stroke-dasharray auf 1 setzen und den Offset in CSS animieren!

.path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Was funktioniert

Siehe den Pen
Basic Example of SVG Line Drawing, Backward and Forward von Chris Coyier (@chriscoyier)
auf CodePen.

Ein Hoch auf Adam Haskell, der mir vor ein paar Monaten deswegen eine E-Mail geschickt hat.

---

Apropos SVG-Linienzeichnen: Lemonade hat eine Landingpage für ihre Spendenaktion 2019 erstellt, die auf der gesamten Seite auf- und abscrollendes SVG-Linienzeichnen verwendet. Sie haben einen Blick hinter die Kulissen darauf geworfen, was ich immer schätze.