animating path segments of an imported svg in paper.js

Question

I am trying to use paper.js to animate svgs I designed in Illustrator. Specifically what I am trying to do is import the svg, and then expand and contract the points on the path. Here is an example of moving paths in paper.js: http://paperjs.org/tutorials/paths/working-with-path-items/

What I want eventually is the path to expand based off the width of another object. It will expand if the object is touching it, and contract back to normal if the object is no longer touching it.

I know that to import the svg I use:

project.importSVG(document.getElementById('svg')[, options.expandShapes: true ]);

The option.expandShapes: true, from what I understand expands the shapes to path items.

How do I access the paths of the svg, in order to expand and contract them?

Here is my SVG path :

path fill="#FFD495" d="M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5
    c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8
    s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3"

Answer 1

Using project.importSVG has actually inserted your SVG paths as Path items in your project.

These are stored in an array as children of the project, accessible by using project.activeLayer.children.

If you do console.log(project.activeLayer.children), you should be able to inspect them in your console.

So now you can access the Path's themselves, second step is to access the Segments of those paths, if you wish to do so.

Segments, are children of Paths so they can be acccessed by Path.segments.

---

You should read about Project Hierarchy and Path Items

Answer 2

You can't treat it as a path after you import the SVG. But here is a more simple way to achieve your goal.

Just create your SVG as a Path directly in Paper.js via pathData using SVG path syntax.

like this:

pathData = 'M456.5,1396.3c-21-31.5-47.7-90.4-45.3-135.6c3.3-62.9,21.3-997.5,15.1-1014.5c-12.6-34.9-7.8-113.1-100.3-111.6c-107.1,1.8-132.7,6.6-159.4,6.6c-47.9,0-23-91.8-23-91.8s39.6-7.6,107.8-7.6s136.8-22.2,205,30.8s67.6,52.5,75.2,97.9c5.7,34.3,30.3,1039.4,30.3,1075.1c0,53-22.7,98.4,7.6,98.4c0,0,103.5,134-104,58.3';

var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 10;

see the result in Paper.js Sketch

And then you can animate this path.