SVG Raphael jQuery Дорога/путь трейдинга

Question

Если у меня есть анимационный круг, как в этом example, есть ли способ, которым он может оставить постоянный след на холсте, 1px сплошной белый?

Я попытался динамически построить путь, но не смог заставить это работать.

Спасибо заранее, любая помощь была бы оценена

Answer 1

Я не знаю, почему SVG получает такой плохой рэп по сравнению с его кузиной страны, элементом холста. Удивительно, сколько раз SVG отклоняется как неадекватное или неуместное, прежде чем любая серьезная попытка даже сделана для изучения его возможностей.

Пожалуйста, взгляните на this fiddle.

Большая часть этого приводится в движение динамической оценки движущейся точки на пути, следующим образом:

function arrowline(canvas, pathstr, duration, attr, callback) 
{  
    var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" }); 
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr); 
    var total_length = guide_path.getTotalLength(guide_path); 
    var start_time = new Date().getTime(); 
    var interval_length = 25; 

    var interval_id = setInterval(function() 
     { 
      var elapsed_time = new Date().getTime() - start_time; 
      var this_length = elapsed_time/duration * total_length; 
      var subpathstr = guide_path.getSubpath(0, this_length); 
      attr.path = subpathstr; 
      path.animate(attr, interval_length); 

      if (elapsed_time >= duration) 
      { 
       clearInterval(interval_id); 
       if (callback != undefined) callback(); 
      }          
     }, interval_length); 
    return path;  
} 

Я бросаю вызов любому, чтобы найти решение с HTML-холст, который является более экономичным, чем это. Если вы планируете добавить какую-либо интерактивность к этому виджету, подумайте о том, как легко привязывать событие к SVG при оценке экономики.

Answer 2

Вы можете сделать что-то вроде этого: http://jsfiddle.net/nDxbK/

Edit: Я сказал, что это не будет работать, если пример не из круг, движущийся по прямой, и что SVG не будет адекватным, если вы захотите сделать такую ​​вещь для случайного движения (но этот холст, с другой стороны, был бы идеальным). Zero доказал, что я ошибаюсь в его ответе, и то, что я написал, было воспринято как критика SVG - далеко от меня! SVG потрясающе.