CODEWITHSUNDEEP
javascriptanimationsvgsvg-animate
alex morris
alex morris

Reputation: 9

Move shape along parts of path

I am looking for a method to move an element along a path in stages kind of like a subway map. This is to illustrate position within a process. Any pointers toward libraries or techniques much appreciated.

example diagram

Upvotes: 0

Views: 139

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14585

To animate the movement of the metro train along the path, the animateMotion command will be used.

To create a motion path, you must load the motion diagram into the vector editor 

<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="https://i.sstatic.net/0c7Aq.jpg " width="100%" height="100%" />
</svg>

Then in the vector editor you need to add node points

enter image description here

Then save the file in the * .svg format and copy thepath formula to another file 

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

Next, we write the animation formula 

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

Below is the full code
Animation starts after a click.

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

Upvotes: 2

Related Questions