CODEWITHSUNDEEP
javascriptsvgsnap.svg
gang
gang

Reputation: 1820

Manipulate a path in Snap.svg or redraw it?

For a metaball animation like this one: http://paperjs.org/examples/meta-balls/ I am creating a path in snap.svg that connects two circles. It looks like this:

<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. What would be better: to redraw the path on each frame or to manipulate it?
  2. How can I manipulate the path? (i.e. move the points and control points around)

If it were more than two circles, I suppose redrawing would be the way to go.

Upvotes: 5

Views: 1476

Answers (1)

gang
gang

Reputation: 1820

Just update the d attribute of the path.

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

First Select the path if it is not already stored in a variable:

var path = Snap("#p");

Then update:

path.attr({
    d: newD
});

Upvotes: 2

Related Questions