CSS/SVG 스트로크 애니메이션

Question

나는이 원을 가지고 있는데, h1을 클릭하면 움직입니다.

하지 못했습니다 중간에서 :

모든 것이 animatation 같은 오른쪽으로 바닥에서 시작하는 것이 내가 원하는 것을 제외하고 확인을 작동합니다.

http://jsfiddle.net/zj7w81ss/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="80px" height="80px" viewBox="0 0 16 16" preserveAspectRatio="none"> 
<circle cx="8" cy="8" r="6.215"></circle> 
</svg> 

내가 이걸 어떻게해야합니까?

감사합니다.

Answer 1

당신은이 속성을 변환을 사용하여 원을 회전 할 수 있습니다 :

transform="rotate(degrees centerX centerY)"

<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle> 

이 라인 애니메이션의 방향을 변경하려면이 stroke-dashoffset: -39;

편집에 CSS 당신에게 초기 stroke-dashoffset을 변경할 수 있습니다 : tested on your fiddle