Pathdata fails to instantiate at new paper.Path(...):TypeError: Cannot read property 'getDirectedAngle' of null #1885
Comments
nikkwong
changed the title
importSVG: TypeError: Cannot read property 'getDirectedAngle' of null
|
Another annoying case of these: |
|
This logic passes several hundred cases for me (line 8187 of paper-full.js): |
|
I'm finally looking into this. @nikkwong could you post more context of the code above? It doesn't seem to make sense at lie 8187 of paper-full.js, v0.12.11 - v0.12.15… |
|
I did a test with https://github.com/nfroidure/svg-pathdata, which parses it correctly: Input: {
commands: [
{
type: 512,
relative: true,
rX: 4.695,
rY: 4.695,
xRot: 0,
lArcFlag: 0,
sweepFlag: 1,
x: 4.672,
y: -3.082
},
{
type: 512,
relative: true,
rX: 79.28,
rY: 79.28,
xRot: 0,
lArcFlag: 0,
sweepFlag: 0,
x: 1.697,
y: -4.434
}
]
} |
|
I get the same error when running paper.project.importSVG(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> </svg>`); |
|
i'm also getting this error. Is there a fix, or at least a find/replace i can do in the svg code to make it work. Used illustrator files with single path - tried running them through SVGOMG and that doesn't help |
|
my issue before was though using illustrator's Export for Screens, or Export as... - however if i use Save as and make the same file an SVG i do not get this issue. running that same file through SVGOMG trims anything unnecessary and this still works fine. Do other people with this issue also use illustrator for exporting? |
Here's the sketch:
This is the offending pathdata:
http://sketch.paperjs.org/#V/0.12.7/S/TZHRSgNBDEV/JeyTggk7SSYz038QhD5aH9a6UKm2pS0Iiv/unVbQl92byczNSfI17Kb3eVgMy+18Xm+Gu2G9f+nxbv6gw3SYj/IwnTc3q+G+hngi9yauk6pYo+t3pDFplWgckts6FanUJDt5SDJSkygURRS6da0ZNxA3KiaK2MWCGnQiSxI6le5bfs3HJi3B232dOGVSqcFuYqVL51wkMo1siPpfYUFIV85ZIghh4RRSFFjW2LOoEl6VzMUlgIUrnKzTGtqrXClrJ8V57QlDYZdS2LKYMdpImcOkIJtQlb2K5d4ecELG2u0BfSlClyJs4mQuY3RlfXY1ccekK+ZIih763DArL//kiQMFG2NuAZBRsQGQLLGRRo75Kv3JN0a1y2oCD8EKYHLwUjf8XA23WPLzcZ62h/3r7nwaFo9P3z8=
EDIT: Seems like the importing pathData function is not very stable? I am getting this error on about half of the non-trivial path data items I'm trying to import. Here's another one:
EDIT: Ok, guess it's because the # of arguments for the arc commands are not 7. For example, it seems to be choking at:
a45.193 45.193 0 01-14.05-2.575However, browsers are rendering this just fine, and seems like SVG tools are exporting arc commands with less than 7 arguments, including illustrator. Is there a possible workaround here?
EDIT: Ok, I see what's happening. The large arc flag and sweep flags are concatenated without a space between them by some programs including illustrator. I.e. the
01ina45.193 45.193 0 01-14.05-2.575. Browsers seem to understand this and parse each of those parameters individually, but paper understands them as a single value and doesn't split them.Related to #1808, which renders 'correctly' in browsers, but chokes in paperjs. Seems like the way browsers handle this one is even more bizarre:
a150 150 0 011.593 9.98, it will eagerly match digits to fill the sweep and arc flags, so that command is actually interpreted asa 150 150 0 0 1 .593 9.98. Think the way to fix this would be by fixing the very complicated regex here:part.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);not sure if I'm up for it..The text was updated successfully, but these errors were encountered: