Zeichnungsanimation eines Pfeils in SVG

Question

Ich bin ziemlich neu in der SVG-Welt und habe einige Probleme, wenn ich einen gekrümmten Pfeil "zeichnen" möchte.

Grundsätzlich möchte ich eine Animation wie die in this article erklärt, aber mit einer Form am Ende des Pfades, um einen Pfeil anzuzeigen.

Unten ist der Code, den ich für geraden Pfeil verwenden:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> 
<defs> 
    <marker 
    id="arrow" 
    orient="auto" 
    viewBox="0 0 10 10" 
    markerWidth="3" 
    markerHeight="4" 
    markerUnits="strokeWidth" 
    refX="1" refY="5"> 
    <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
    </marker> 
</defs> 

<path 
    id="line" 
    marker-end="url(#arrow)" 
    stroke-width="3" 
    fill="none" 
    stroke="black"> 

    <animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M10,10 L10,10; M10,10 L45,25;" /> 
</path> 

Mit etwas CSS:

#line 
{ 
    stroke-dasharray: 5; 
    stroke-dashoffset: 10; 
    -webkit-animation: draw 1s linear infinite; 
} 

@-webkit-keyframes draw 
{ 
    to { stroke-dashoffset: 0;} 
} 

Ergebnis ist unten:

Also das ist cool, aber jetzt möchte ich einen gebogenen Pfeil. Also habe ich den belebten Tag wie unten aktualisiert:

<animate 
     dur="2s" 
     repeatCount="indefinite" 
     attributeName="d" 
     values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" /> 

Ich habe gerade den Weg, um zu animieren ändern, um einen gekrümmten, einen zu haben. Aber Ergebnis ist derjenige unter:

Ich denke, es ist ganz logisch, aber es ist nicht das, was ich möchte. Der Marker bewegt sich gerade auf einer geraden Linie. Es sollte dem Zeichenpfad folgen.

Ich habe keine Ahnung, wie dies zu tun, um ehrlich zu sein, wäre irgendwelche Vorschläge toll :)

Sie a JSFiddle here finden.

Wie Sie sehen, wird in diesen Experimenten kein JS verwendet, es wäre großartig, wenn wir diese Sprache vermeiden und einfach SVG + CSS verwenden könnten.

Vielen Dank im Voraus!

Answer 1

Ich glaube, Sie könnten diesen Artikel auf svg Linie Animation sehr nützlich finden: https://css-tricks.com/svg-line-animation-works/

CSS:

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

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

Demo davon in Aktion: http://codepen.io/chriscoyier/pen/bGyoz

In einem Nachteil ist, über JavaScript und Festlegen der Länge der zu zeichnenden Linie. Wenn Sie JS nicht verwenden möchten, können Sie herausfinden, welche Länge animiert werden soll, indem Sie die Werte für dasharray und dashoffset aktualisieren.