Объединение js - анимационный круг по пути в svg

Question

Я новичок в Joint js, а также с ограниченными навыками javascript. То, что я пытаюсь понять, - это то, что когда я нажимаю кнопку Анимация, анимационный круг должен следовать по пути от начала до конца. Это происходит по пути, но не по линии.

c = V('circle', { 
       r: 8, 
       fill: 'red' 
      }); 
     var cylinderView = graph.getCell(reserved_path[player[i]]).findView(paper); 
     var cylinderPath = cylinderView.vel.findOne('path'); 
     var cyclic = graph.getCell(jQuery("#"+player[i]).attr('model-id')).findView(paper); 
     var cylinderScalable = cyclic.vel.findOne('.scalable'); 

     var cylinderScalableCTM = cylinderPath.node.getCTM().inverse(); 

     c.animateAlongPath({ 
      dur: '5s', 
      repeatCount: '1' 
     }, cylinderPath.node); 

     c.scale(2, 2); 

     cylinderScalable.append(c); 

Что я понял, что (с) линия cylinderScalable.append создает эту проблему, и она может быть решена, если я мог бы добавить детали непосредственно в SVG, но я не знаю, как осуществить это

Вот мой полный код: https://jsfiddle.net/9espjppv/

Спасибо за вашу помощь заранее.

Answer 1

Посмотрите на эту doc, это может помочь вам

var c = V('circle', { r: 8, fill: 'red' }); 
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]); 
V(paper.svg).append(c);