SVG에서 화살표 그리기 애니메이션

Question

저는 SVG 세계에서 상당히 새로워졌습니다. 곡선 화살표를 "그리는"경우에는 몇 가지 문제에 직면하고 있습니다.

기본적으로 this article에 설명 된 것과 같은 애니메이션을 만들고 싶지만 화살표를 표시하려면 경로 끝에 모양이 있어야합니다. CSS의 비트와

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

: 아래

내가 직선 화살표에 사용하는 코드입니다

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

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

결과 아래에 있습니다 :

,536,

멋지다. 그러나 이제 나는 구부러진 화살을 원한다. 그래서 아래의 애니메이션 태그를 업데이트했습니다 :

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

나는 곡선을 갖기 위해 애니메이션으로 변경했습니다.

나는 그것이 매우 논리적 인 생각하지만, 내가 좋아하는 것이 무엇되지 않습니다 : 그러나 결과는 아래와입니다. 마커는 현재 직선으로 움직이고 있습니다. 그것은 드로잉 경로를 따라야합니다. :)

당신은 a JSFiddle here을 찾을 수 있습니다

나는 정직하게 이렇게하는 방법에 아무 생각이 없다, 어떤 제안은 좋은 것입니다.

본 실험에서 JS는 사용되지 않았으므로이 언어를 피하고 SVG + CSS 만 사용하면 좋을 것입니다.

미리 감사드립니다.

Answer 1

나는 당신이 매우 유용 SVG 라인 애니메이션에서이 문서를 찾을 수 있습니다 생각 : 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; 
    } 
} 

데모 : http://codepen.io/chriscoyier/pen/bGyoz

주의해야 약이에 자바 스크립트 및 그릴 줄의 길이를 결정. JS를 사용하고 싶지 않으면 dasharray 및 dashoffset 값을 업데이트하여 애니메이션 길이를 알아낼 수 있습니다.