Manipulate a path in Snap.svg or redraw it?
-
26-12-2019 - |
Question
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>
- What would be better: to redraw the path on each frame or to manipulate it?
- 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.
Solution
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
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow