Search code examples
svgpaperjs

SVG path is rendered differently when imported into PaperJS

I am trying to copy a SVG path from a SVG file to use in a PaperJS project.

Here is a Paper.JS Sketch of the SVG using new Path(svgPath)

Here is a JSFiddle of how it's supposed to look

Any idea why this is happening?

Solution

  • The pathData contains two subpaths (i.e. outside of character, inside hole). When dealing with multiple subpaths in PaperJS, I believe you need to use CompoundPath instead of Path. In your PaperJS example, change...

    var path = new Path(pathData);

    to...

    var path = new CompoundPath(pathData);