Is there a way to set the inital position of the animatable objects in the specific path before they start moving along this path?

Question

I want to set the animatable objects one by one with a certain gap on a specific path before they start moving, like the visual effect in the following picture. I tried to Google it, but I failed. I would appreciate it if you could offer any help!

Here is my simple uncompleted demo (implemented animation but didn't set initail position):https://jsfiddle.net/cactus_/kqczha7y/1/

var animation1 = document.getElementById("animation1");
var animation2 = document.getElementById("animation2");
var svg = document.getElementById("container");

function moveTriangle() {
    animation1.beginElement();
    animation2.beginElement();
}

function unPasueMotion() {
    svg.unpauseAnimations();
}

function pauseMove(){
    svg.pauseAnimations();
}

<button onclick="moveTriangle()">StartMove</button>
<button onclick="pauseMove()">PauseMove</button>
<button onclick="unPasueMotion()">ContinueMove</button>

<svg id="container" viewBox="-10 -10 200 100" xmlns="http://www.w3.org/2000/svg" style="border:1px solid white">
    <path
        id="motionPath"
    fill="none"
    stroke="gray"
        stroke-width=30
    d="M20,50 L50,20 150,70 180,50" />

  <polygon id="sym1" points="-10,0 0,10 10,0 0,-10" fill="red" /> 
  <circle id="sym2" r="5" fill="blue"></circle>  
    <animateMotion id="animation1" xlink:href="#sym1" 
        dur="10s" repeatCount="1" fill="freeze" begin="indefinite" rotate="auto">
        <mpath xlink:href="#motionPath"/>
    </animateMotion>
    <animateMotion id="animation2" xlink:href="#sym2" 
        dur="10s" repeatCount="1" fill="freeze" begin="indefinite" rotate="auto">
        <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </svg>