javascript - 在 Snap.svg 中操作路径或重绘它？

Question

对于像这样的元球动画：http: //paperjs.org/examples/meta-balls/我正在 snap.svg 中创建一条连接两个圆圈的路径。它看起来像这样：

<path d="M171 370 C207, 335, 493 335, 529 370 C493, 335, 493 264, 529 229 C493, 264, 207 264, 171 229 z"></path>

1. 什么会更好：在每一帧上重绘路径或操纵它？
2. 如何操纵路径？（即移动点和控制点）

如果超过两个圆圈，我想重绘将是要走的路。

Answer 1

只需更新路径的 d 属性即可。

<path id="p" d="M171 370 C207, 335, 493 335, 529 370 C493, 335, 493 264, 529 229 C493, 264, 207 264, 171 229 z"></path>

如果路径尚未存储在变量中，则首先选择路径：

var path = Snap("#p");

然后更新：

path.attr({
    d: newD
});