How to change the start position of svg image using animateMotion?

I am trying to change the start position of an svg image to animate it along a path using animateMotion

You can check the current result here https://jsfiddle.net/7espvwuz/

In this fiddle I am using a circle to mock my image.

The problem is

if I use cx = 0 and cy = 0, the animation starts at a wrong position
if I use cx = 0 and cy = 100, the circle is perfectly positioned but the animation is shifted by a value of 100 in the y axis.

What am I doing wrong?

Solution

You can give the circle the desired cx and cy (cx="6.25" cy="100") and set those attributes to 0 when the animation begins.

Please read about the set element.

var currentIndex = 0;

const pathArray = [
  "M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25",
  "M25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25",
  "M36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5",
  "M68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75",
  "M88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4"];

function buttonClick() {
  set1.setAttribute("cx",6.25);
  set1.beginElement();
  set2.setAttribute("cy",100);
  set2.beginElement();
  motion1.setAttribute("path", pathArray[currentIndex]);
  motion1.beginElement();
  currentIndex++;
}

<button onclick="buttonClick()">Click me</button>
<svg preserveAspectRatio="xMidYMid meet"  xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 450 120" style="background-color: #0010ff3b;">
<path d="M6.25 100 L6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4" stroke='black' strokeDasharray="5, 5" fill='transparent'></path>

  <circle id="circle" r="5" cx="6.25" cy="100" stroke="black" stroke-width="3" fill="red" >
    <set id="set1" begin="indefinite" attributeName="cy" to="0"></set>  
    <set id="set2" begin="indefinite" attributeName="cx" to="0"></set>

    <animateMotion id="motion1" begin="indefinite" dur="1s" fill="freeze" path="M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25">
    </animateMotion>
  </circle>
</svg>