Rysowanie animacji strzałki w SVG

Question

Jestem całkiem nowy w świecie SVG i mam pewne problemy, gdy chcę "narysować" zakrzywioną strzałkę.

Zasadniczo chciałbym utworzyć animację podobną do tej opisanej w this article, ale z kształtem na końcu ścieżki, aby wyświetlić strzałkę.

Poniżej znajduje się kod używać do prostej strzałki:

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

Przy odrobinie CSS:

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

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

wynik jest poniżej:

To fajne, ale teraz chciałbym zakrzywioną strzałę. Dlatego zaktualizowałem animowany znacznik, jak poniżej:

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

Właśnie zmieniłem ścieżkę animacji, aby uzyskać zakrzywioną. Ale wynik jest jeden poniżej:

Myślę, że to dość logiczne, ale to nie jest to, co chciałbym. Znacznik porusza się obecnie po linii prostej; powinien podążać ścieżką rysowania.

nie mam pojęcia, jak to zrobić, aby być uczciwym, wszelkie sugestie byłoby świetnie :)

można znaleźć a JSFiddle here.

Jak widać, w tych eksperymentach nie stosuje się JS, byłoby świetnie, gdybyśmy mogli uniknąć tego języka i używali tylko SVG + CSS.

Z góry dziękuję!

Answer 1

myślę można znaleźć ten artykuł na svg animacji linii bardzo przydatne: 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 go w akcji: http://codepen.io/chriscoyier/pen/bGyoz

Tam jest zastrzeżenie o JavaScript i określanie długości linii do narysowania. Jeśli nie chcesz używać JS, możesz ustalić długość animacji, aktualizując wartości dasharray i dashoffset.