Stop Animation einer SVG-Datei - Code-Snippet enthalten

Question

Ich verwende ein SVG Bild und animiert den Pfad eines Diagramms. Es funktioniert gut. Sobald das Bild jedoch gezeichnet wurde, muss ich die Iteration stoppen (Stopp von dem Bild, das neu gezeichnet wird). Der Code befindet sich in diesem CODEPEN-Codefragment here.

Ich habe versucht, infinite von animation in der CSS Datei zu entfernen, aber das gezeichnete Bild wird entfernt.

Was ich tun möchte, ist:

1.) das Bild Animieren wie im Code dargestellt.

2.) Halten Sie die Animation von reanimating (dies wegen des in den animation verwendet infinite Attribut ist)

3.) Sobald das Bild gezogen wurde, soll das Bild gleich bleiben, wenn der Benutzer die frischt Seite.

Answer 1

Ändern Sie diese Zeile:

animation: draw 10s infinite linear; 

dazu:

animation: draw 10s forwards; 

Die vorwärts Modus füllen funktioniert wie folgt: Nachdem die Animation endet (durch Animation-Iteration-Zählung bestimmt), wird die Animation Wenden Sie die Eigenschaftswerte für die Zeit an, zu der die Animation beendet wurde