Eine beliebte kleine SVG-Animationstechnik ist das Zeichnen von Pfaden. Wenn Sie es sich nicht vorstellen können, finden Sie hier eine Sammlung von zig Beispielen, die ich erstellt habe. Im Wesentlichen zeichnet sich der Strich um SVG-Formen im Laufe der Zeit ab.
Ich habe zum ersten Mal davon in Jake Archibalds Artikel Animierte Strichzeichnung in SVG gehört, in dem es um eine gute Erklärung geht, wie es nur sein kann. Aber natürlich habe ich auch meine eigene Erklärung versucht und wir gehen das in diesem Video durch.
Ich denke, es ist am einfachsten, mit CSS zu beginnen und wie die Strich-Eigenschaften funktionieren, wenn sie auf eine SVG-Form angewendet werden. Wie sie länger und sogar so lang werden können, dass sie die gesamte Form bedecken (oder nicht bedecken). Wenn sie dann so lange versetzt werden, funktioniert die Zeichnung.
Wenn Sie das verstanden haben, verstehen Sie, dass JavaScript dabei helfen kann, die Länge der erforderlichen Striche und Offsets zu berechnen, und machen Sie es genau richtig.