To achieve a continuous motion on the path, utilizing animateMotion is recommended. However, if you require intermittent pauses in the movement, incorporating javascript would be necessary. A comprehensive guide on using javascript to mimic animateMotion can be found in the book titled: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
In order to halt the rectangle at specific intervals, I leverage the timestamp from the requestAnimationFrame's callback function. In the following example, I stop the rectangle every 2 seconds for a duration of 1 second.
As the timestamp progresses continuously, I establish a way to log the moment when the motion ceases so that the animation can resume from that point. This involves setting the variable lastTime as the most recent time the rectangle was stationary.
Please refer to the comments provided within my code for further insights.
let rid;//the request animation frame id
let track = document.getElementById("track"),
trackLength = track.getTotalLength(),//the total length of the track
dur = 15000; //duration of one loop of track, in ms
let lastTime = 0;//last time when the rect has stopped
let flag = false;
let interval = 5000;
function update(time) {
rid = requestAnimationFrame(update);
// to stop the rect every 5 seconds
var deltaT = time%interval;
//during 1 second
if ...
svg{border:1px solid;}
path{fill:none; stroke:black;}
<svg viewBox = "0 0 150 200" width="200">
<path id="track" d="M70,30 Q70,20 80,20L120,20 Q130,20 130,30L130,170.000 Q130,180 120,180L30,180 Q20,180 20,170L20,130 Q20,120 30,120L60,120 Q70,120 70,110Z" />
<polygon id="rect" points="0,0 -10,0 -10,-10 0,-10 0,0" style="fill: #ff0000;"/>
</svg>
UPDATE
Here's an alternative approach using animateMotion:
setInterval(()=>{ svg.pauseAnimations();
setTimeout(()=>{svg.unpauseAnimations()},1000)
},2000);
svg{border:1px solid;}
path{fill:none; stroke:black;}
<svg id="svg" viewBox = "0 0 150 200" width="300">
<path id="track" d="M70,30 Q70,20 80,20L120,20 Q130,20 130,30L130,170.000 Q130,180 120,180L30,180 Q20,180 20,170L20,130 Q20,120 30,120L60,120 Q70,120 70,110Z" />
<polygon id="rect" points=...
UPDATE 2
Presented below is a demonstration of moving 5 blocks along a path. The key distinction lies in the begin attribute within the animateMotion.
All updates are...
setInterval(()=>{ svg.pauseAnimations();
setTimeout(()=>{svg.unpauseAnimations()},1500)
},3000);
svg{border:1px solid;}
path{fill:none; stroke:black;}
<svg id="svg" viewBox = "30 0 360 450" width="300">
<defs>
<polygon id="theRect" points="0,0 20,0 20,20 0,20 0,0" style="fill: #ff0000;" />
</defs>
<path id="track" d="M288.938,33 Q289,12 310,12L350,12 Q371,12 371,33L371,408 Q371,429 350,429L66,429 Q45,429 45,408L45,374 Q45,353 66,353L267,353 Q288,353 288.062,332Z" />
<use xlink:href="#theRect">
<animateMotion id="test" begin= "0s" dur="15s" repeatCount="infinite" rotate="auto" fill="freeze" >
<mpath xlink:href= "#track" />
</animate...