SVG object following path

Question

I have a svg-path:

 <path id="path" fill="black" stroke="black" stroke-width="1"
    d="M 0.00,250.00
       C 0.00,250.00 33.75,335.50 125.00,375.00
         216.75,415.00 250.00,500.00 250.00,500.00
         250.00,500.00 285.00,408.25 377.25,377.75
         469.50,346.75 500.00,250.00 500.00,250.00
         500.00,250.00 0.00,250.00 0.00,250.00 Z
       M 90.00,308.50" />

I want another (svg) object to follow the path. How do i do that?

Answer 1

Use AnimateMotion

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	       height="100vh" viewBox="0 0 600 600" >  
<path id="pathID" fill="black" stroke="black" stroke-width="1"
    d="M 0.00,250.00
       C 0.00,250.00 33.75,335.50 125.00,375.00
         216.75,415.00 250.00,500.00 250.00,500.00
         250.00,500.00 285.00,408.25 377.25,377.75
         469.50,346.75 500.00,250.00 500.00,250.00
         500.00,250.00 0.00,250.00 0.00,250.00 Z
       M 90.00,308.50" />   
	 <circle cx="0" cy="0" r="15" fill="red" > 
        <animateMotion begin="0s" dur="4s" repeatCount="indefinite" >
            <mpath xlink:href="#pathID"	/> 
        </animateMotion>
     </circle>		
	   
</svg>

Three-button operation:

• forward movement of the red ball
  moving forward means moving from the starting point of the path (the starting point of drawing the path in the vector editor)
• backward movement of the red ball
• mid-way red ball

var circ =  document.getElementById("circle2");   
var animation1 = document.getElementById("forward");
function forwardSVG(){
      
	 circ.style.opacity = "1";
	 animation1.beginElement();
	
} 
var animation2 = document.getElementById("middle")
function middleSVG(){
     circ.style.opacity = "1";
	 animation2.beginElement();
}  

var animation3 = document.getElementById("back")
function backSVG(){
     circ.style.opacity = "1";
	 animation3.beginElement();
}

<div id="pathContainer4">
		<button id="btn1" onclick="forwardSVG()">forward</button >
		<button id="btn2" onclick="middleSVG()">Middle<b/utton >
		<button id="btn3" onclick="backSVG()">Back</button >
</div>	
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	       height="100vh" viewBox="0 0 600 600" > 
 <path transform="translate(0 -200)" id="pathID" fill="black" stroke="black" stroke-width="1"
    d="M 0.00,250.00
       C 0.00,250.00 33.75,335.50 125.00,375.00
         216.75,415.00 250.00,500.00 250.00,500.00
         250.00,500.00 285.00,408.25 377.25,377.75
         469.50,346.75 500.00,250.00 500.00,250.00
         500.00,250.00 0.00,250.00 0.00,250.00 Z
       M 90.00,308.50" />   
	   <circle id="circle2" cx="0" cy="-200" r="15" fill="red" opacity="0"  >  
  	 
	 <animateMotion
	   id="forward"
	   dur="2s"
	   begin="indefinite"
	   repeatCount="1"
	   keyPoints="0;1"
	   keyTimes="0;1"
       calcMode="linear"  >
		 <mpath href="#pathID" />
	 </animateMotion> 
		<animateMotion
		   id="middle"
		   dur="2s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="0.5;1"
		   keyTimes="0;1"
		   calcMode="linear" >
		 <mpath href="#pathID" />
	    </animateMotion> 
		   <animateMotion
		   id="back"
		   dur="2s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="1;0"
		   keyTimes="0;1"
		   calcMode="linear" >
		 <mpath href="#pathID" />
	    </animateMotion>
         </circle>
</svg>