javascript - 沿部分路径移动形状

Question

我正在寻找一种方法来沿着路径分阶段移动元素，就像地铁 map 一样。这是为了说明流程中的位置。非常感谢任何指向库或技术的指针。

Answer 1

为了制作地铁列车沿路径移动的动画，animateMotion将使用命令。

要创建运动路径，您必须将运动图加载到矢量编辑器中

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="50%" height="50%" viewBox="0 0 1000 945" preserveAspectRatio="xMinYMin meet"  >  

<image xlink:href="/image/0c7Aq.jpg " width="100%" height="100%" />
</svg>	 

然后在矢量编辑器中您需要添加节点

然后将文件保存为 * .svg 格式，并将path 公式复制到另一个文件

  <!-- Train track -->
   <path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>

接下来我们编写动画公式

 <animateMotion
      xlink:href="#train"
      begin="svg1.click"
      dur="14s"
      fill="freeze">
      <mpath xlink:href="#track" />
    </animateMotion>

下面是完整代码
单击后开始动画。

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50%" height="50%" viewBox="0 55 1000 945" preserveAspectRatio="xMinYMin meet" Style="border:1px solid gray;">
<style>

.s1 {
 fill:white;
 stroke:gray;
 stroke-width:8;
 }

</style> 
      <!-- Train track -->
   <path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>
    <!-- Metro stations  -->
 <ellipse cx="58" cy="119" rx="27" ry="27" class="s1"/>
   <ellipse  cy="118" cx="911" ry="27" rx="27" class="s1" />
    <ellipse cy="398" cx="910.3" ry="26.2" rx="26.9"  class="s1" />	
     <ellipse cy="397.8" cx="294.5" ry="26.2" rx="26.9"  class="s1"   />
    <ellipse cy="858" cx="294.5" ry="26.2" rx="26.9"  class="s1"  />
   <ellipse cy="858" cx="911.7" ry="26.2" rx="26.9"  class="s1" />
  <ellipse cx="910" cy="628" rx="45" ry="45" fill="yellowgreen" stroke="gray" stroke-width="8" /> 
  
    
   <g id="train_start " >  
   <circle cx="58" cy="119" r="55" stroke="dodgerblue" fill="yellowgreen" /> 
    <circle cx="58" cy="119" r="27" stroke="dodgerblue" fill="white" />
  </g>
  <g id="train" >  
   <circle cx="0" cy="0" r="55" stroke="dodgerblue" fill="dodgerblue" /> 
    <circle cx="0" cy="0" r="27" stroke="dodgerblue" fill="white" />
  </g>
    <animateMotion
	  xlink:href="#train"
	  begin="svg1.click"
	  dur="8s"
	  fill="freeze"
    repeatCount="indefinite">
	  <mpath xlink:href="#track" />
	</animateMotion>
  
</svg>