Search code examples
paperjs

Why Paper.js create path with path data looks different from importSVG()?

As the code below and result image, the data used is exactly the same, yet, the result looks different. Any idea?

var pathData = 'M2253.35,991.1c0,133.79 -108.46,242.25 -242.25,242.25c-133.79,0 -242.25,-108.46 -242.25,-242.25c0,-133.79 108.46,-242.25 242.25,-242.25c23.13166,0 45.50614,3.24217 66.69379,9.29687c-21.41569,17.08959 -28.99235,39.21284 -22.72998,66.36974c4.51912,19.57983 1.84302,36.54082 -8.0283,50.88297c-11.35414,-3.52242 -23.42334,-5.41957 -35.9355,-5.41957c-66.9,0 -121.13,54.22 -121.13,121.12c0,66.9 54.23,121.12 121.13,121.12c66.89,0 121.12,-54.22 121.12,-121.12c0,-22.51871 -6.14433,-43.60075 -16.8476,-61.66191c16.43974,-5.80075 28.58821,-17.95876 36.44543,-36.47404c10.9747,-25.86154 30.32412,-39.3221 58.04826,-40.38167c27.40806,39.25569 43.48392,87.00946 43.48392,138.51762zM2059.24903,879.92754c9.90684,-14.35675 12.59943,-31.33927 8.07776,-50.94757c-6.31362,-27.37914 1.43923,-49.6419 23.25853,-66.78829c44.38054,15.40874 82.89584,43.35999 111.30338,79.61122c-27.35983,1.25299 -46.48201,14.704 -57.36653,40.35304c-7.847,18.49121 -19.97411,30.64167 -36.38133,36.45138c-12.57072,-16.80058 -29.40217,-30.22764 -48.89181,-38.67979z';

var path = project.importSVG('<path d="' + pathData + '"/>');
var path2 = new Path(pathData);
 
path.fillColor = 'pink';
path2.fillColor = 'orange';

path2.position += [0, 500];

view.translate([
    -1700,
    -650
]);

enter image description here

Solution

  • The path data that you are providing includes multiple path so you shouldn't use the Path constructor, which is made for a single path, but the CompoundPath constructor, which is made for multiple paths.
    Here is a sketch demonstrating the corrected code.

    var path2 = new CompoundPath(pathData);