SVG動畫 - 從頂部50px後反向和停止

如何反轉SVG動畫...需要動畫從頂部到底部？SVG動畫 - 從頂部50px後反向和停止

而且我想50像素後停止輪從頂部（從0到50像素有動畫和停止）

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>

來源

2016-07-26 Reddy

可以逆轉與動畫：

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

animationMotion定義中的

。有了這些屬性，您還可以停止動畫並返回到開始。我只是在〜50px（50px +頂部邊距）處添加了一條黑線，並修改了該線在此線上轉動的關鍵點。這是

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

你的情況

。這不是最乾淨的方式，因爲它不是完全在50px之後，但是如果你不想添加一個新的路徑，它具有所需的動畫路徑長度，你必須測試一下。

工作小提琴：https://jsfiddle.net/df4qt9zz/

而且記住，SVG是可伸縮的，所以50像素將圍繞100像素，如果SVG的規模越來越大。

來源

2016-07-26 05:04:23 mxlse

感謝您的澄清......我得到了我想要的東西，除非需要在50px（或可能是不同的高度）之後停止，否則它不應該再次上升...... – Reddy

要使其停止，請使用'keyPoints =「 1; 0.952「keyTimes =」0; 1「' –

是的，抱歉，我不知道爲什麼我認爲它必須轉向。 – mxlse

SVG動畫 - 從頂部50px後反向和停止

回答

相關問題