Snap SVG change line x,y coordinates using JavaScript

Question

I want to change the x and y coordinates of the svg line, but it keeps drawing multiple lines itself over and over again. Here is the result: http://prntscr.com/6tdexj

How do I draw only one line every 1 second ?

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' }); };

Remove the previous line before drawing a new one.

Etheryte
– Etheryte

2015-04-13 20:45:16 +00:00
Commented Apr 13, 2015 at 20:45 — Etheryte
– Etheryte, Commented Apr 13, 2015 at 20:45

joews · Accepted Answer · 2015-04-13 21:04:47Z

You're creating a new line in each interval. You should create a single line and change its properties instead:

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);

You could make the line transition smoothly by calling line.animate instead of line.attr:

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

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

Collectives™ on Stack Overflow

Snap SVG change line x,y coordinates using JavaScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related