Snap.svg - 如何始终用一条线连接两个对象？

Question

我们如何在 Snap.svg 中始终用一条线连接两个对象？

笨蛋：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);

Answer 1

没关系，想通了！

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