js-svg-path icon indicating copy to clipboard operation
js-svg-path copied to clipboard

js-svg-path is very picky about this valid path

Open ctrlcctrlv opened this issue 8 years ago • 1 comments

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.

ctrlcctrlv avatar Jul 21 '17 13:07 ctrlcctrlv

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.

ctrlcctrlv avatar Jul 21 '17 13:07 ctrlcctrlv