SVG에서 원형 차트 onLoad를 시계 방향으로 애니메이트하는 방법

Question

시계 방향으로 움직이는 원형 차트가 붙어 있습니다. 여기에, 나의 pie chart fiddle 내가 예를 들어, brezier 곡선 경로로 작업이 애니메이션을 필요

,

<path d="M 276 63.03 C 329.93 63.03 381.86 78.24 421.4 105.63 L 276 222.79 M 276 63.03" /> 

나는 또한 알고, 그것은 snap.svg에게 라이브러리를 사용하여 달성 만에없는 운동입니다 수 있습니다 이 경우.

도움을 주시면 감사하겠습니다. 사전에

감사합니다!

Answer 1

내포 된 animate을 사용할 수 있으며 점진적인 지연으로 일부 속성을 변경할 수 있습니다.

는이 예에서는 각각의 애니메이션이 0.5 초를 시작하는 슬라이스마다 충전 g 내부 스트로크 g을 넣고, 내부 animate 요소를 추가했다. opacity 속성을 애니메이션으로 만들었습니다 (각 요소에 opacity="0" 속성을 추가 했으므로 다른 속성으로 바꿀 수 있음).

<g id="pieFillSection2" opacity="0" style="fill: yellow;fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" > 
    <animate attributeName="opacity" from="0" to="1" 
      begin="0.5s" dur="1s" fill="freeze"/> 
    <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" /> 
    <g class="pieStroke" id="pieStrokeSection2" style="stroke-width: 1.0;stroke: rgb(128,128,128);stroke-opacity: 1.0; fill: none" transform="matrix(1,0,0,1,0,0)" > 
     <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" /> 
    </g> 
</g> 

확인 업데이트 JSFiddle : 이것은 두 번째 조각이다.