SVG Animation - Rückwärts und Stop nach 50px von oben

Question

Wie kann ich die SVG-Animation umkehren ... Benötigen Sie eine Animation von TOP bis BOTTOM?

Und ich will die Runde nach 50px von oben stoppen (von 0 bis 50px es hat zu animieren und Anschlag)

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

Sie die Animation umkehren kann mit :

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

in der animationMotion Definition. Mit diesen Attributen können Sie auch die Animation stoppen und zum Anfang zurückkehren. Ich fügte nur eine schwarze Linie bei ~ 50px hinzu (50px + der Rand oben) und modifizierte die keyPoints, die der Kreis an dieser Linie dreht. Es ist

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

in Ihrem Fall. Das ist nicht der sauberste Weg, denn es ist nicht genau nach 50px, aber wenn Sie keinen neuen Pfad hinzufügen möchten, der die benötigte Länge Ihres Animationspfads hat, müssen Sie ein wenig testen.

Arbeits Geige: https://jsfiddle.net/df4qt9zz/

Darüber hinaus denken Sie daran, dass SVG skalierbar ist, so dass die 50px um 100px sein wird, wenn die Größe der SVG wird immer größer.