CODEWITHSUNDEEP
javascriptsvgsnap.svg
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Snap.svg - How to always connect two objects with a line?

How do we always connect two objects with a line in Snap.svg?

Plunkr: https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview

var circleOne = s.circle(150, 150, 100);
var circleTwo = s.circle(450, 450, 100);
var boxOne = circleOne.getBBox();
var boxTwo = circleTwo.getBBox();
var line = s.line(boxOne.cx, boxOne.cy, boxTwo.cx, boxTwo.cy);
line.attr({
  stroke: 'red'
});

var t = new Snap.Matrix();
t.translate(200, 0, boxTwo.cx, boxTwo.cy);
setTimeout(function() {
  circleTwo.animate({ transform: t}, 500, mina.easein);
}, 1000);

Upvotes: 1

Views: 791

Answers (1)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Nevermind, figured it out!

setTimeout(function() {
  circleTwo.animate({ transform: t}, 500, mina.easein);
  line.animate({
    x2: boxTwo.cx + 200
  }, 500, mina.easein);
}, 1000);

https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview

Upvotes: 1

Related Questions