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>