Disegno animazione di una freccia in SVG

Question

Sono abbastanza nuovo nel mondo SVG e sto affrontando alcuni problemi quando voglio "disegnare" una freccia curva.

Fondamentalmente, vorrei creare un'animazione come quella spiegata in this article, ma con una forma alla fine del percorso per visualizzare una freccia.

Di seguito è il codice che uso per freccia dritta:

<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> 

Con un po 'di CSS:

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

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

Il risultato è inferiore:

Quindi è bello, ma ora vorrei una freccia curva. Così ho aggiornato il tag animato come di seguito:

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

Ho appena modificare il percorso di animare in modo da avere uno curvo. Ma risultato è quella qui sotto:

Penso che sia abbastanza logico, ma non è quello che vorrei. Il segnalino si sta attualmente muovendo su una linea retta; dovrebbe seguire il percorso del disegno.

non ho idea di come fare in modo di essere onesti, qualche suggerimento sarebbe grande :)

Potete trovare a JSFiddle here.

Come potete vedere, nessun JS è usato in questi esperimenti, sarebbe bello se possiamo evitare questo linguaggio e usare solo SVG + CSS.

Grazie in anticipo!

Answer 1

penso che si potrebbe trovare questo prodotto a linea di animazione svg molto utile: 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 di esso in azione: http://codepen.io/chriscoyier/pen/bGyoz

In c'è un avvertimento su JavaScript e determinazione della lunghezza della linea da disegnare. Se non si desidera utilizzare JS, è possibile determinare la lunghezza dell'animazione aggiornando i valori dasharray e dashoffset.