js-svg-path
js-svg-path copied to clipboard
js-svg-path is very picky about this valid path
This path works and generates shapes with outline.getShapes():
<path d="M564.9,895.3c69.7,14.8,139.3,29.5,209,44.3c-50,0.4-99.9,0.7-149.9,1.1c46.7-0.3,93.3-0.6,140-1
c-36.8-32.2-76.5-61.1-118.4-86.3c41.3,5.4,82.4,12.7,123.1,21.8c-32.2-8.7-63.8-19.5-94.6-32.2c35.8,6.8,71.6,13.5,107.5,20.3
c-43.8-34.6-87.6-69.2-131.5-103.8c33.6,3.5,66.9,8.9,99.8,16.4c-23.8-3.1-47.4-7.9-70.5-14.3c24-3.2,48.2-4.9,72.4-5.1
c-15.4,3.7-30.7-9.6-34.9-24.9c-4.2-15.3-0.2-31.4,4.1-46.7c21.8-76.6,52.8-150.2,83.6-223.5C761.7,565,720.5,669.3,680.9,774.2
c42.3-108.9,84.6-217.7,126.8-326.6c-9.1,27.2-20.8,53.5-34.8,78.4c27.8-131,89.6-252.3,126.7-381c-24.5,45.1-41.3,94.3-49.4,144.9
c31.9-51.7,66.5-101.6,103.7-149.6c-2,30.7-9,61.1-20.6,89.7c-4.1-21.2-3.5-43.3,1.8-64.3c52.3,92.2,70.9,199.1,88.7,303.6
c-14.7-80.4-29.3-160.8-44-241.2c24.4,117,58.7,231.9,102.6,343.1c-7.6-61.5-20-122.5-36.8-182.1
c36.7,115.1,79.5,228.2,128.1,338.8c-4.8-33.8-9.6-67.7-14.4-101.5c16.1,103.6,35.9,206.5,59.3,308.7
c-25.8-63.6-51.5-127.2-77.3-190.8c19.8,72.3,46.9,142.7,80.8,209.6c-21.8-124.9-55.3-247.7-99.8-366.4
c13.8,67.4,27.6,134.7,41.4,202.1c-40-49.1-68.9-106.1-93.9-164.3c-10.1-23.6-19.7-47.9-22.9-73.4z"/>
But this one doesn't:
c-36.8-32.2-76.5-61.1-118.4-86.3c41.3,5.4,82.4,12.7,123.1,21.8c-32.2-8.7-63.8-19.5-94.6-32.2c35.8,6.8,71.6,13.5,107.5,20.3
c-43.8-34.6-87.6-69.2-131.5-103.8c33.6,3.5,66.9,8.9,99.8,16.4c-23.8-3.1-47.4-7.9-70.5-14.3c24-3.2,48.2-4.9,72.4-5.1
c-15.4,3.7-30.7-9.6-34.9-24.9c-4.2-15.3-0.2-31.4,4.1-46.7c21.8-76.6,52.8-150.2,83.6-223.5C761.7,565,720.5,669.3,680.9,774.2
c42.3-108.9,84.6-217.7,126.8-326.6c-9.1,27.2-20.8,53.5-34.8,78.4c27.8-131,89.6-252.3,126.7-381c-24.5,45.1-41.3,94.3-49.4,144.9
c31.9-51.7,66.5-101.6,103.7-149.6c-2,30.7-9,61.1-20.6,89.7c-4.1-21.2-3.5-43.3,1.8-64.3c52.3,92.2,70.9,199.1,88.7,303.6
c-14.7-80.4-29.3-160.8-44-241.2c24.4,117,58.7,231.9,102.6,343.1c-7.6-61.5-20-122.5-36.8-182.1
c36.7,115.1,79.5,228.2,128.1,338.8c-4.8-33.8-9.6-67.7-14.4-101.5c16.1,103.6,35.9,206.5,59.3,308.7
c-25.8-63.6-51.5-127.2-77.3-190.8c19.8,72.3,46.9,142.7,80.8,209.6c-21.8-124.9-55.3-247.7-99.8-366.4
c13.8,67.4,27.6,134.7,41.4,202.1c-40-49.1-68.9-106.1-93.9-164.3c-10.1-23.6-19.7-47.9-22.9-73.4"/>
Only difference is the z at the end (SVG path close). Honestly, this library is a supreme disappointment. Coupled with issue #1, it is not to spec, and it is full of strange bugs like this one. Now I have to find another library and I've wasted a few hours with this toy library...oh well...
I hope this report helps you fix some of this library's bugs, but I give up.
After trying a bunch of other libraries, I was drawn back to the simplicity of this one, and eventually thought of a workaround.
d = $('g.eraserStroke path').attr('d')+'z';
This allows you to keep the original path the same, while fooling this library into having its closed path. It works fine for my case, but YMMV.