使用JavaScript捕捉SVG更改线x,y坐标

时间:2015-04-13 20:41:39

标签: javascript svg snap.svg

我想更改svg线的x和y坐标,但它会一遍又一遍地绘制多条线。结果如下: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'
    });
};

1 个答案:

答案 0 :(得分:2)

您在每个间隔中创建一个新行。您应该创建一行并改为改变其属性:

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