SVGアニメーション - どのように私は</strong> BOTTOM <strong>に<strong>TOP</strong>からアニメーション化する必要があります... SVGアニメーションを逆にすることができ、トップ

Question

からは50px後

を逆にして停止しますか？

そして、私は（それがアニメーションとを停止することがある0からは50pxに）上からは50px後のラウンドを停止したい

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

あなたはしてアニメーションを逆にすることができます：

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

アニメーションモーション定義の

。これらの属性を使用すると、アニメーションを停止して最初に戻ることもできます。私はちょうど50px（50px +上の余白）に黒い線を追加し、円がこの線で回転するkeyPointsを修正しました。それはあなたのケースで

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

です。これは50pxの後では正確ではないので、最もクリーンな方法ではありませんが、アニメーションパスの長さが必要な新しいパスを追加したくない場合は、少しテストする必要があります。

の作業フィドル：https://jsfiddle.net/df4qt9zz/

またSVGはスケーラブルなので、SVGのサイズが大きくなっている場合は50pxは約100pxになることに注意してください。