在Snap.svg中操作路径或重绘它?

时间:2014-01-11 13:33:21

标签: javascript svg snap.svg

对于像这样的元球动画: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. 我如何操纵路径? (即移动点和控制点)
  3. 如果它超过两个圈子,我想重新绘制将是最佳选择。

1 个答案:

答案 0 :(得分:2)

只需更新路径的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
});