使用JavaScript捕捉SVG更改线x、y坐标
我想更改svg线的x和y坐标,但它会一次又一次地绘制多条线。结果如下: 如何每1秒只画一条线使用JavaScript捕捉SVG更改线x、y坐标,javascript,svg,snap.svg,Javascript,Svg,Snap.svg,我想更改svg线的x和y坐标,但它会一次又一次地绘制多条线。结果如下: 如何每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); co
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'
});
};
在每个间隔中创建一个新行。您应该创建一行并更改其属性:
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);
在绘制新行之前,请先删除上一行。