SVG 对象跟随路径

Question

我有一个 svg 路径：

 <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" />

我希望另一个 (svg) 对象跟随路径。我该怎么做？

Answer 1

使用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>

三键操作：

• 红球向前移动
  向前移动是指从路径的起点（矢量编辑器中绘制路径的起点）开始移动
• 红球向后移动
• 中途红球

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>