SVG 애니메이션 그래프 화살표

Question

이것은 SVG를 처음 사용하는 것으로 화살표가있는 애니메이션 선 그래프를 만들 수 있는지 알고 싶습니다. 화살표가없는 움직이는 선 그래프, 화살표가있는 애니메이션이 아닌 선 그래프, 화살표가있는 움직이는 직선의 여러 예제를 발견했지만 정확히 내가 원하는 것은 아닙니다. 아래에 나와있는 일부 코덱 예제를 첨부했습니다. 이것이 가능한지 아는 사람이 있습니까/해결책이 있습니까? 대단히 감사하겠습니다!

1. 애니메이션 라인 실종 화살표 (요구 화살표) : http://codepen.io/alexandraleigh/pen/jVaObd

   # HTML 
   <div class="graph__wrapper"> 
       <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1"> 
       <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
        <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
       </g> 
       </svg> 
   </div> 
   
   
   # CSS(Less) 
   
   @import "lesshat"; 
   
   @darkgrey:   #303030; 
   
   *{ 
       box-sizing: border-box; 
   } 
   
   body{ 
       background: @darkgrey; 
   } 
   
   .graph__wrapper{ 
       width: 400px; 
       margin: 30px auto; 
       position: relative; 
   
       svg{ 
       position: absolute; 
       margin: 36px 0px 0px 15px; 
       } 
   } 
   
   .path { 
       stroke-dasharray: 1000; 
       stroke-dashoffset: 1000; 
       animation: dash 3s ease-in forwards; 
       animation-iteration-count: 1; 
       animation-delay: 1s; 
   } 
   
   @keyframes dash { 
       to { 
       stroke-dashoffset: 0; 
       } 
   } 
   
   .description{ 
       font-family: "Roboto"; 
       color:lighten(@darkgrey, 50%); 
       text-align: center; 
       margin: 40px 0px; 
   } 
   

2. 애니메이션은 화살표 직선 (경로에 여러 지점에서 정지 할 필요)

   : http://codepen.io/alexandraleigh/pen/yVPYrY

3. I # 1에서 # 2까지 경로 설명을 추가하려고 시도했지만 원하는 최종 그래프가 있고 애니메이션이 없습니다. http://codepen.io/alexandraleigh/pen/pNdgWR

4. 나는 또한 # 1 # 2에서 화살표 마커를 추가했지만, 화살표 애니메이션하지 않습니다

   : http://codepen.io/alexandraleigh/pen/aBVdVY

나는 또한 플러그인과 같은 http://snapsvg.io/을 사용하여 열려있어하지만, 내 상황을 돕는 실제 사례를 보지 못했습니다.

Answer 1

오프셋 이동 (이전 구문 : 동작 경로)을 사용하여이 작업을 수행 할 수 있습니다. 이것은 실험적인 기능입니다. 현재 Chrome에서만 작동합니다. ... 즉, 현재 크롬에서 작동하는 것입니다,하지만 곧 새로운 systax로 전환됩니다 나는 여기에 "오래된"구문을 사용하는 점에 더

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #303030; 
 
} 
 
.graph__wrapper { 
 
    width: 400px; 
 
    margin: 30px auto; 
 
    position: relative; 
 
    svg { 
 
    position: absolute; 
 
    margin: 36px 0px 0px 15px; 
 
    } 
 
} 
 
.path { 
 
    stroke-dasharray: 428; 
 
    stroke-dashoffset: 428; 
 
    animation: dash 3s ease-in forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
} 
 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes pm { 
 
    from { 
 
    motion-offset: 0%; 
 
    } 
 
    to { 
 
    motion-offset: 100% 
 
    } 
 
} 
 
#arrow { 
 
    animation: pm 3s ease-in forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
    motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844'); 
 
    motion-rotation: auto; 
 
    motion-anchor: center; 
 
} 
 
.description { 
 
    font-family: "Roboto"; 
 
    color: lighten(@darkgrey, 50%); 
 
    text-align: center; 
 
    margin: 40px 0px; 
 
}

<div class="graph__wrapper"> 
 
    <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
     <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" 
 
     id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
 

 

 

 
     <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" /> 
 

 
    </g> 
 
    </svg> 
 
</div>

당신은 또한 할 수있다 이것은 animateMotion이지만, svg 애니메이션은 조만간 가치가 떨어질 것입니다. 당신은

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #303030; 
 
} 
 
.graph__wrapper { 
 
    width: 400px; 
 
    margin: 30px auto; 
 
    position: relative; 
 
    svg { 
 
    position: absolute; 
 
    margin: 36px 0px 0px 15px; 
 
    } 
 
} 
 
.path { 
 
    stroke-dasharray: 428; 
 
    stroke-dashoffset: 428; 
 
    animation: dash 3s linear forwards; 
 
    animation-iteration-count: 1; 
 
    animation-delay: 1s; 
 
} 
 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
.description { 
 
    font-family: "Roboto"; 
 
    color: lighten(@darkgrey, 50%); 
 
    text-align: center; 
 
    margin: 40px 0px; 
 
}

<div class="graph__wrapper"> 
 
    <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
     <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" 
 
     id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path> 
 

 

 

 
     <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white"> 
 
     <animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze"> 
 
      <mpath xlink:href="#Path-1" /> 
 
     </animateMotion> 
 
     </polyline> 
 

 
    </g> 
 
    </svg> 
 
</div>