Html 使用svg每隔几秒钟移动一次对象

如图所示，每五秒钟绘制（一次）并移动对象一次。我搜索了一下，但找不到一种方法来画外线和移动附近的物体

<animate xlink:href="#blue-rectangle"
         attributeName="x" 
         from="50"
         to="425" 
         dur="5s"
         begin="circ-anim.repeat(2)"
         fill="freeze" 
         id="rect-anim" />

使用
animateMotion
将是路径上连续运动的解决方案。如果需要每隔一段时间停止移动，我会使用javascript。在本书中：您详细介绍了如何使用javascript模拟
animateMotion

为了停止rect，我使用requestAnimationFrame回调的时间戳。在下一个示例中，我每2秒停止一次rect，持续1秒

由于时间戳是连续运行的，我需要一种方法来记录它停止的时刻，以便我可以从这里恢复动画。为此，我将
lastTime
设置为rect停止的最后一次

请阅读我代码中的注释


rid//请求动画帧id
let track=document.getElementById（“track”），
trackLength=track.getTotalLength（），//轨迹的总长度
dur=15000//一个轨道回路的持续时间，单位为ms
设lastTime=0//上次rect停止时
让flag=false；
设间隔=5000；
功能更新（时间）{
rid=请求动画帧（更新）；
//每5秒停止一次rect
var deltaT=时间百分比间隔；
//在1秒内
如果（deltaT<间隔/2）{
flag=false；
变量t=（（deltaT+lastTime）%dur）/dur，//重复周期中的位置
距离，//沿此矩形路径的距离
点，//该距离的SVGPoint
point2；//SVGPoint表示稍微不同的距离
距离=轨道长度*（t%1）；
点=轨迹。getPointAtLength（距离）；
point2=轨迹。getPointAtLength（（距离+2）%trackLength）；
角度=数学atan2（点.y-点2.y，点.x-点2.x）；
rect.setAttribute(
“转化”，
“翻译（”+
[第x点，第y点]+
")" +
“旋转（”+
角度*180/Math.PI+
")"
);
}else{if（flag==false）{lastTime+=interval/2；flag=true；}}
}
rid=请求动画帧（更新）
svg{border:1px solid；}
路径{填充：无；笔划：黑色；}

使用animateMotion的
rotate:auto
属性，在设置所需的值圆
cx
和
cy
属性后，我们可以显示5-6个红色块而不是一个红色块吗。试试看，如果你做不到，再问另一个问题。我很乐意帮忙。同时，请考虑接受这个答案。我必须创建另一个线程！！但我需要显示5个不同的块，如图所示：）你们能把它画成多边形吗？如果是这样，我需要
点
值，我会为您更改它。我已经使用新路径更新了上一个示例。请看一看。