search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.98k stars 1.07k forks source link

Path is sometimes malformed #485

Closed MorisatoK closed 8 years ago

MorisatoK commented 8 years ago

I was updating my project recently with v2.3.0 because of #409 and everything seemed to be fine after a few tests with some of the paths I use for displaying racetrack maps.

Now I got an error report from an user that some of the paths are malformed and I was able to track this error down to exactly this transition from v2.2.0 to v2.2.1. Since v2.2.0 and lower are broken in newer Chrome I tested this with IE11 and Edge. With v2.2.0 the path looks like intended and with v2.2.1 it is malformed.

I created a simplified JSFiddle to show this error and what I did to work around it. But maybe this could be fixed in the library somehow?

Edit: further testing showed, that drawing the paths natively w/o the lib also displays correctly.

Fuzzyma commented 8 years ago

Just for the records and debugginng purposes: Here is the fiddle with svg v2.2: https://jsfiddle.net/LbmnfzLd/

The path gets translated into absolute coordinates. Here is the output of both, buggy and not buggy after translation:

M323.294 206.036C323.294 206.036 267.30899999999997 205.552 252.486 205.552S189.89299999999997 206.81 184.964 206.81C180.036 206.81 165.949 207.563 165.949 207.563S163.024 207.20899999999997 162.941 203.254C162.941 199.304 159.692 198.629 158.437 199.56799999999998C157.18200000000002 200.50599999999997 140.55100000000002 208.06599999999997 118.19400000000002 208.06599999999997C95.83800000000002 208.06599999999997 88.46900000000002 206.84699999999998 74.45500000000001 194.56999999999996C60.44100000000002 182.29299999999998 55.14700000000001 159.07799999999997 55.14700000000001 159.07799999999997L44.214 93.847C44.214 93.847 43.701 89.208 40.214 89.098C36.728 88.988 34.714999999999996 84.848 34.714999999999996 84.848S23.721 56.247 16.908 41.86C27.901999999999997 70.46 41.525999999999996 65.603 41.525999999999996 65.603S67.975 60.681999999999995 70.01899999999999 60.245S76.02 58.775999999999996 78.767 58.260999999999996C81.514 57.745999999999995 84.779 58.089 86.326 58.260999999999996S89.377 60.934 90.514 62.776999999999994C91.652 64.619 123.08699999999999 109.375 125.755 112.428C128.424 115.482 136.502 123.883 136.502 123.883L167.994 152.10399999999998L204.485 186.58399999999997C204.485 186.58399999999997 207.18800000000002 189.301 209.733 191.31199999999998C212.278 193.32199999999997 219.731 192.291 219.731 192.291S225.853 190.917 228.603 191.60399999999998C231.352 192.291 234.245 193.20999999999998 235.977 195.243C237.71 197.274 240.493 201.24 245.975 201.405C251.456 201.57 402.282 202.294 406.685 202.361C411.088 202.429 414.871 202.423 419.681 207.839C424.491 213.255 422.72999999999996 218.975 421.11899999999997 223.074C419.508 227.173 415.96599999999995 232.679 413.183 235.25300000000001C410.401 237.82700000000003 407.389 240.609 401.936 242.312C396.48199999999997 244.013 384.19 245.31 384.19 245.31S361.885 247.964 357.447 248.308C335.2 205.662 323.294 206.036 323.294 206.036Z 
M323.29400634765625 206.03599548339844C323.29400634765625 206.03599548339844 267.30902099609375 205.552001953125 252.4860076904297 205.552001953125S189.89300537109375 206.80999755859375 184.96400451660156 206.80999755859375C180.0360107421875 206.80999755859375 165.94900512695312 207.56298828125 165.94900512695312 207.56298828125S163.0240020751953 207.20899963378906 162.94100952148438 203.25399780273438C162.94100952148438 199.3040008544922 159.69200134277344 198.62899780273438 158.43701171875 199.5679931640625C157.1820068359375 200.50599670410156 140.55101013183594 208.0659942626953 118.19400787353516 208.0659942626953C95.83800506591797 208.0659942626953 88.46900177001953 206.8470001220703 74.45500946044922 194.5699920654297C60.44100570678711 182.29299926757812 55.14700698852539 159.07798767089844 55.14700698852539 159.07798767089844L44.2140007019043 93.84700012207031C44.2140007019043 93.84700012207031 43.70100021362305 89.20800018310547 40.2140007019043 89.0979995727539C36.72800064086914 88.98799896240234 34.71500015258789 84.8479995727539 34.71500015258789 84.8479995727539S23.72100067138672 56.24700164794922 16.908000946044922 41.86000061035156C10.095001220703125 27.472000122070312 23.71900177001953 22.614999771118164 23.71900177001953 22.614999771118164S50.167999267578125 17.694000244140625 52.21200180053711 17.256999969482422S58.2130012512207 15.788000106811523 60.959999084472656 15.27299976348877C63.707000732421875 14.758000373840332 66.97200012207031 15.10099983215332 68.51899719238281 15.27299976348877S71.56999969482422 17.945999145507812 72.70700073242188 19.788999557495117C73.84500122070312 21.631000518798828 105.2800064086914 66.38700103759766 107.94800567626953 69.44000244140625C110.61700439453125 72.49400329589844 118.69499969482422 80.89500427246094 118.69499969482422 80.89500427246094L150.18699645996094 109.11600494384766L186.67800903320312 143.59600830078125C186.67800903320312 143.59600830078125 189.38099670410156 146.31300354003906 191.92601013183594 148.32400512695312C194.47100830078125 150.33399963378906 201.92401123046875 149.30299377441406 201.92401123046875 149.30299377441406S208.04600524902344 147.9290008544922 210.79600524902344 148.61599731445312C213.5449981689453 149.30299377441406 216.43800354003906 150.2220001220703 218.1699981689453 152.2550048828125C219.9029998779297 154.28599548339844 222.68600463867188 158.2519989013672 228.16799926757812 158.41700744628906C233.6490020751953 158.58200073242188 384.4750061035156 159.30599975585938 388.8780212402344 159.3730010986328C393.281005859375 159.4409942626953 397.06402587890625 159.43499755859375 401.8740234375 164.8509979248047C406.68402099609375 170.26699829101562 404.9230041503906 175.98699951171875 403.31201171875 180.08599853515625C401.7010192871094 184.18499755859375 398.15899658203125 189.6909942626953 395.3760070800781 192.26499938964844C392.5940246582031 194.83900451660156 389.5820007324219 197.62100219726562 384.1289978027344 199.32400512695312C378.6750183105469 201.02499389648438 366.3830261230469 202.32200622558594 366.3830261230469 202.32200622558594S344.0780029296875 204.9759979248047 339.6400146484375 205.32000732421875C335.20001220703125 205.66200256347656 323.29400634765625 206.03599548339844 323.29400634765625 206.03599548339844z

PS: Any chance we can reproduce this bug with less control points?

Edit: Here the fiddles with not that much points, still showing the error: https://jsfiddle.net/yc87o5b6/ https://jsfiddle.net/4ht36d4m/

Both Paths cleaned up - you can see the mistake at the very end of the path. The orginal path is aligned:

M323.294 206.036 C 323.294 206.036 267.309 205.552 252.486 205.552 S 189.893 206.81 184.964 206.81 C 180.036 206.81 165.949 207.563 165.949 207.563 S 163.024 207.209 162.941 203.254 C 162.941 199.304 159.692 198.629 158.437 199.568 C 157.182 200.506 140.551 208.066 118.194 208.066 C 95.838 208.066 88.469 206.847 74.455 194.567 C 60.441 182.293 55.147 159.078 55.147 159.078 L 44.214 93.847 C 44.214 93.847 43.701 89.208 40.214 89.098 C 36.728 88.988 34.715 84.848 34.715 84.848 S 23.721 56.247 16.908 41.86 C 10.095  27.472 23.719  22.615 23.719  22.615 
M323.294 206.036 C 323.294 206.036 267.309 205.552 252.486 205.552 S 189.893 206.81 184.964 206.81 C 180.036 206.81 165.949 207.563 165.949 207.563 S 163.024 207.209 162.941 203.254 C 162.941 199.304 159.692 198.629 158.437 199.568 C 157.182 200.506 140.551 208.066 118.194 208.066 C 95.838 208.066 88.469 206.847 74.455 194.567 C 60.441 182.293 55.147 159.078 55.147 159.078 L 44.214 93.847 C 44.214 93.847 43.701 89.208 40.214 89.098 C 36.728 88.988 34.715 84.848 34.715 84.848 S 23.721 56.247 16.908 41.86 C 27.902  70.46  41.526  65.603 41.526  65.603 

M323.294 206.036 c       0 0       -55.985  -0.484 -70.808  -0.484 s -62.593   1.258-67.522   1.258c  -4.928      0 -19.015   0.753 -19.015   0.753 s  -2.925  -0.354  -3.008  -4.309 c       0  -3.95   -3.249  -4.625  -4.504  -3.686 c  -1.255   0.938 -17.886   8.498 -40.243   8.498 c-22.356       0-29.725  -1.219-43.739 -13.496 c-14.014 -12.277-19.308 -35.492-19.308 -35.492 L 44.214 93.847 c      0      0 -0.513 -4.639 -4     -4.749 c -3.486 -0.11  -5.499 -4.25  -5.499 -4.25  S 23.721 56.247 16.908 41.86 c -6.813 -14.388  6.811 -19.245  6.811 -19.245

So we can say, the last c is causing problems in that specific case

MorisatoK commented 8 years ago

I created another fiddle with two paths (buggy and fixed each) that have the least amount of control points here: https://jsfiddle.net/xcxsmfwa/1/

Fuzzyma commented 8 years ago

Thank you for your help. Again both paths transformed and aligned along with the orginal path:

M215.458 245.23 C 215.458 245.23 292.861 245.23 309.731 245.23 S 405 216.451 405 138.054 S 329.581 15 287.9 15 C 246.22   15    147.976  15    117.212  15    C 86.45 15 15 60.65 15 134.084 C 15 207.518 111.259 246.221 129.122 246.221 C 146.984 246.221 215.458 245.23 215.458 245.23z 
M215.458 245.23 C 215.458 245.23 292.861 245.23 309.731 245.23 S 405 216.451 405 138.054 S 329.581 15 287.9 15 C 268.052 245.23 169.808 245.23 139.044 245.23 C 86.45 15 15 60.65 15 134.084 C 15 207.518 111.259 246.221 129.122 246.221 C 146.984 246.221 215.458 245.23 215.458 245.23Z 
                                                                                                               ^----------------------------------------------^
M215.458 245.23 c   0       0     77.403   0     94.274   0    S 405 216.451 405 138.054 S 329.581 15 287.9 15 c -41.68    0   -139.924   0   -170.688   0    C 86.45 15 15 60.65 15,134.084 c  0  73.434  96.259 112.137 114.122 112.137 C 146.984 246.221 215.458 245.23 215.458 245.23z
Fuzzyma commented 8 years ago

Thanks to you I found the error (a very stupid one). I wonder how this wasnt detected until now...

MorisatoK commented 8 years ago

Thanks a lot for the quick fix! Just updated to v2.3.1 and all my paths look good without any workarounds :)