SVG - 아크 애니메이션 점프 단계

Question

경로에 대해 svg 애니메이션을 만들려고합니다. 시작 결과와 최종 결과는 잘하지만, 몇 가지 이유로 더 중간 위치가없는 (애니메이션은 기간 이후에 처음부터 끝까지 점프

이것은 내가 사용하는 코드입니다 :.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title> 
<path 
    id="p1" 
    class="cls-1" 
     d=" 
      M 20 40 A 20 20 0 1 0 40 20 
     " 
/> 
<animate xlink:href="#p1" 
     attributeName="d" 
     attributeType="XML" 
     from="M 20 40 A 20 20 0 1 0 40 20" 
     to="M 50 57.32050807568877 A 20 20 0 0 0 40 20" 
     dur="10s" 
/> 
</svg> 

내가 어려움에도 불구하고 당신이 아크 애니메이션을하고 싶은, 제대로 이해하면

Answer 1

.

아크 공식

<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />  

Large-arc-flag 및 sweep-flag은 정수 - 상수이며 "0"또는 "1"의 두 값만 사용하며 애니메이션을 부드럽게 만들지 않습니다. 빨간 점선으로 작은 아크의 위치 아래의 예에 작은 아크 Large-arc-flag = 0

-Large-arc-flag = 1가 표시되어있는 경우

당신은 대형 아크 이산 전환 애니메이션을 만들 수있다. 소형 및 대형 아크의 시작과 끝의

좌표는 "1"의 플래그의 값이 '대형 아크에 플래그 "0"

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> 
 
<defs> 
 
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} 
 
</style> 
 
</defs> 
 
<title>percentage-green</title> 
 
<g transform="scale(2)"> 
 
<path id="p1" 
 
    class="cls-1" 
 
     d="M 20 40 A 20 20 0 1 0 40 20"> 
 
<animate 
 
     attributeName="d" 
 
     attributeType="XML" 
 
\t \t repeatCount="5" 
 
     begin="Layer_1.mouseover"  
 
\t from="M 20 40 A 20 20 0 1 0 40 20" 
 
     to="M 20 40 A 20 20 0 0 0 40 20" 
 
     dur="2s" > 
 
\t \t </animate> 
 
</path> 
 
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" /> 
 
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 
</g> 
 
</svg>

을 일치 두 번째 예에게 커서

에게 가져 가면

애니메이션이 시작

는 당신과 비슷한가요 - 패치가 large-arc-flag = 1 (대형 호)의 상수 값을 원활하게 변경됩니다의 매개 변수 "D"커서를 가져 가면

애니메이션이 시작

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> 
 
<defs> 
 
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} 
 
</style> 
 
</defs> 
 
<title>percentage-green</title> 
 
<g transform="scale(2)"> 
 
<path id="p1" 
 
    class="cls-1" 
 
     d="M 20 40 A 20 20 0 1 0 40 20"> 
 
<animate xlink:href="#p1" 
 
     attributeName="d" 
 
     attributeType="XML" 
 
\t \t repeatCount="5" 
 
     values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"  
 
\t begin="Layer_1.mouseover" 
 
     dur="3s" 
 
    restart="whenNotActive" \t \t > 
 
\t \t </animate> 
 
</path> 
 
<circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" /> 
 
<path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 
</g> 
 
</svg>