Search code examples
javascriptsvgpaperjs

Paper.js not drawing svg paths correctly

Here's the sketch with problem -

http://sketch.paperjs.org/#S/q1bKS8xNVbJSCs5OLUnOUNJRSs5PAfHLEosUChJLMgwVbBXyUssVAoBsDXVfMzM9ExMdc2M9Uw8jcyM9M9NcXSMDMz0jIx1jA5qLqGtax+QpAAHYYXrFJUX52anO+Tn5RUBHqiflJCZnq2NREZ6ZUpIBVGFsDfReUlFqYnZBfmZeSbGSVXRsLQA=

Here's how it should look( run snippet to view ) - 

<svg height="210" width="400" stroke="black">
  <path d="M66.44,73.5H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65m-206.22,30H272.65" />
  Sorry, your browser does not support inline SVG.
</svg>

Not sure what is wrong. It seems paper.js is skipping the intermediate points and joining the second point with the last point. Any ideas what might be wrong, or alternatives to importing svg paths in paper.js? Thanks.

Reference : http://paperjs.org/reference/path/#path--pathData

Solution

  • It might not be very evident from a first read of Path's documentation, but it seems Path can only be used to draw paths described by connected points. What needs to be used is CompoundPath instead. From the documentation -

    A compound path is a complex path that is made up of one or more simple sub-paths.

    So this works - 

    var compoundPath = new paper.CompoundPath(pathData);