SVG 애니메이션 - 맨 위로부터 50px 뒤로 뒤집고 정지합니다.

Question

어떻게 SVG 애니메이션을 되돌릴 수 있습니까? 에서 애니메이션해야합니다.에서 아래쪽?

그리고 나는 정상에서 당신이 애니메이션을 취소 할 수 있습니다

svg { 
 
    border: 3px solid #eee; 
 
    display: block; 
 
    margin: 1em auto; 
 
} 
 
p { 
 
    color: #aaa; 
 
    text-align: center; 
 
}

<svg width="100" height="200" viewBox="0 0 200 500"> 
 
<path id="motionPath" fill="none" stroke="#ED1E25" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="10,8" d="M53.738,2243.583 
 
c0,0,53.198-53.916,58.558-133.25S64.321,1976.33,49.655,1954.33s-44.331-55.33-44-122.664 
 
c0.111-22.688,9.666-77.666,48.666-129.333c24.376-32.293,40.667-85.68,41.667-118.678c0,0,3.667-63.012-34.333-114.345 
 
c-10.717-14.478-56.003-66.333-47.001-133c3.597-26.633,11.017-64.334,44.509-107s57.491-91.004,53.133-144.337 
 
c-2.348-28.726-11.975-80.665-59.975-133.665C31.307,928.106-6.345,864.978,8.988,791.978c1.793-8.538,15.666-62.331,44.666-95.998 
 
s47.334-113.995,41.334-147.995c-2.515-14.252-5-58.736-54.042-116.589c-16.472-19.432-39.65-81.737-20.958-134.07 
 
c8.677-24.293,20-51.077,26.5-60.577s34-51.25,38-84.25c1.444-11.916,10.5-87-31-144.584"/> 
 

 
<circle id="circle" r="10" cx="0" cy="0" fill="tomato" /> 
 

 
<animateMotion 
 
xlink:href="#circle" 
 
dur="5s" 
 
begin="0s" 
 
fill="freeze" 
 
repeatCount="1"> 
 
<mpath xlink:href="#motionPath" /> 
 
</animateMotion> 
 
</svg>

Answer 1

(050 픽셀이 애니메이션을 가지고 및 정지) 50 픽셀 후 라운드를 중지하려면 :

keyPoints="1;0" keyTimes="0;1" calcMode="linear"

animationMotion 정의에 있습니다. 이러한 속성을 사용하여 애니메이션을 중지하고 처음으로 돌아갈 수도 있습니다. 방금 ~ 50px (50px + 상단 여백)에 검은 선을 추가하고이 선에서 원이 변하는 keyPoints를 수정했습니다. 그것은 귀하의 경우

keyPoints="1;0.952;1" keyTimes="0;0.5;1" calcMode="linear"

을합니다. 그것은 50px 이후가 아니기 때문에 가장 깨끗한 방법은 아니지만, 애니메이션 경로에 필요한 길이를 가진 새 경로를 추가하고 싶지 않으면 약간 테스트해야합니다.

근무 바이올린 : SVG는 확장 성이있는 SVG의 크기가 커지고 경우 50 픽셀은 약 100 픽셀을 수 있도록 https://jsfiddle.net/df4qt9zz/

는 또한, 명심하십시오.