Строка изменения привязки SVG x, y с использованием JavaScript

Question

Я хочу изменить координаты x и y строки svg, но он продолжает рисовать несколько строк снова и снова. Вот результат: http://prntscr.com/6tdexj

Как нарисовать только одну строку каждые 1 секунду?

var paper = Snap('#one'); 

var timer = setInterval(function() {my_var()}, 1000); 

function my_var() { 
    x = Math.floor((Math.random() * 100) + 1); 
    y = Math.floor((Math.random() * 100) + 1); 

    console.log(x, y); 

    // SVG LINE 
    var line = paper.line(10, 10, x, y).attr({ 
     fill: 'f44', 
     stroke: '#000' 
    }); 
}; 

Answer 1

Вы создаете новую строку в каждом интервале. Вы должны создать одну строку и изменить его свойства вместо:

var paper = Snap('#one'); 

var line = paper.line(10, 10, 10, 10) 
    .attr({ 
    fill: 'f44', 
    stroke: '#000' 
}) 

setInterval(function() { 
    var x = Math.floor((Math.random() * 100) + 1), 
     y = Math.floor((Math.random() * 100) + 1); 

    line.attr({ x2: x, y2: y }) 
}, 1000); 

Вы могли бы сделать переход линии плавно вызывая line.animate вместо line.attr:

line.animate({ x2: x, y2: y }, 500); 

http://jsbin.com/josuyo/2/edit