Переместить фигуру вдоль частей пути - PullRequest
Новая
       68

Переместить фигуру вдоль частей пути

0 голосов
/ 27 января 2020

Я ищу метод для перемещения элемента по пути поэтапно, как карта метро. Это должно проиллюстрировать положение в процессе. Любые указатели на библиотеки или методы приветствуются.

example diagram

1 Ответ

2 голосов
/ 27 января 2020

Для анимации движения поезда метро по пути будет использоваться команда 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="https://i.stack.imgur.com/0c7Aq.jpg " width="100%" height="100%" />
</svg>

Затем в векторном редакторе необходимо добавить точки узлов

enter image description here

Затем сохранить файл в формате * .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>
...