`a` statement can have 6 numbers

Question

`a` statement can have 6 numbers

JonnyBurger opened this issue 4 years ago · comments

const d = 'M418 430.8c-1.3.2-3 1.1-3.8 2-.7 1-1.1 1.1-.7.4.4-.9-.8-1.2-4.7-1.3-12.7-.4-19.6 0-24.5 1.3-3.2.9-5.3 1.1-5.3.5 0-1.4-12.2 0-13.1 1.5-1.1 1.7-3.9.1-3.9-2.1 0-1.8-.3-1.9-2.7-1-1.6.6-4.9 1.2-7.5 1.4-3.2.2-4.6-.1-4.1-.8.3-.6.1-.7-.6-.3-.6.4-5.2.8-10.1.9-5 0-9 .4-9 .8 0 1.1-6.9 1.6-7.3.6-.4-1.3-16.9-1.7-18.5-.4-.8.6-2.3 1.2-3.5 1.2-1.1.1-2.3.7-2.5 1.3-.1.5-1.3 2.1-2.5 3.4-1.2 1.4-4.3 4.8-6.9 7.7-2.7 2.8-4.8 5.4-4.8 5.6 0 .2-1.5 2.7-3.4 5.5-1.9 2.9-4.5 7.8-5.7 10.9-1.2 3.1-2.8 7.2-3.6 9.1-.8 1.9-1.9 4.4-2.3 5.5-1.2 3-2 7.1-3 15.5-1.6 14.5-1.8 21-.6 21.7.6.3.8.3.4-.1-.3-.4.2-1.5 1.1-2.4 1-.9 3.4-3.2 5.4-5.1 2.3-2.2 5.1-3.6 7.9-4.1 2.4-.5 5-.4 6 .1 1.2.7 1.8.6 1.8-.1 0-.6.5-.8 1-.5.6.4.8.9.6 1.3-.2.4 1.9.7 4.7.7 2.9 0 5.7.5 6.2 1.2.6.6 2.6 1.4 4.5 1.7 6.4.9 11 2.7 12 4.6 1.1 2 1.4 5.7.4 4.7-.6-.6-1.8.2-5.7 3.8a6.69 6.69 0 01-5.1 1.6c-1.7-.2-3.5-.9-4.1-1.6-.7-1-5.4-1.7-15.5-2.3-13.2-.8-14.9-.7-19.1 1-2.6 1.1-5.8 3.1-7.2 4.6-2.1 2.3-2.6 3.9-3 10.7-.2 4.4-.8 8.9-1.2 9.9-.6 1.4-.5 1.7.3 1.2s1.2.3 1.2 2.6c0 1.8-.5 6.2-1.1 9.8-.6 3.6-1 7.4-1 8.5.1 1.1-.3 4.7-.9 8-1.4 8.6-1.9 18.5-2.5 49.5-.4 22.3-.2 29 1 35.5.9 4.4 2.3 10.2 3.3 13 2.6 7.8 11.6 25.5 15.3 30.5 1.9 2.5 6.1 8.3 9.4 13 5.9 8.5 17.8 23.5 22.2 27.8 1.3 1.3 2.3 3.3 2.3 4.5 0 1.2 2.3 10.8 5.1 21.2 2.9 10.5 5.4 20.6 5.6 22.5.3 1.9 1.1 5 1.9 6.8.9 1.8 2 6 2.6 9.2 1 5.3.9 6.4-.8 9.7-1 2.1-3.1 5.9-4.6 8.6-1.6 2.6-2.8 5.7-2.8 6.7 0 2-3 9.1-4.2 10-1.1.9-3.7 12.9-3.2 15.3.2 1.2.8 3.1 1.3 4.2s2.3 4.9 3.9 8.5c1.6 3.6 5.1 8.6 7.6 11.3 5.1 5.1 13.8 10 20.1 11.2 2.2.4 5.1 1 6.5 1.3 3.8.8 18.9.5 24.5-.6 12.9-2.6 19.9-4.4 27.2-7.2 4.3-1.7 9.4-3.8 11.3-4.7 1.9-.9 3.7-1.7 4-1.8.3-.1 1.6-.7 3-1.2 1.4-.6 6.8-2.7 12-4.7 10.5-4 18.3-7.7 18.8-8.9.2-.4.8-.7 1.3-.7s2.9-1.8 5.1-4c2.3-2.2 5-4 6-4s1.8-.3 1.8-.8c0-.4 3.1-3.2 6.9-6.2 3.8-3 7.2-6.4 7.5-7.5.3-1.1 2.1-4.4 4.1-7.3 3.6-5.5 12.3-22.1 14.8-28.2.8-1.9 2.2-6.2 3.2-9.4 1.1-3.9 1.4-7.5 1-10.2-.3-2.5-2-6-3.9-8.6-1.8-2.4-3.1-4.8-2.9-5.5.3-.7-1.1-1.9-3-2.6-6.5-2.8-11.7-13.2-14.2-28.7-2.3-13.6-2.3-38.5-.2-49.5 1.6-8.1 5-23 6.8-29.7.9-3.5 1.1-3.7 3.5-2.8 1.4.6 3.8 1 5.3 1 3.9 0 9.2-2.3 11.7-5.2 2.7-3.1 8.5-12.3 10.7-17.3 1.1-2.2 2.8-7.1 3.8-10.8 1.1-3.8 3.5-10 5.5-13.8 1.9-3.9 4.4-9.8 5.4-13.2 1.2-3.6 2-9.1 2-13.1 0-9.4-2.5-19.4-5.9-22.9-2.3-2.6-3.1-2.8-7.2-2.4-2.5.3-6.2 1.5-8.2 2.7-2 1.2-3.7 1.9-3.7 1.5 0-1.1-8.6 7.8-9.8 10.1-.5 1.1-1.3 4.7-1.7 8.1-.4 3.8-1.2 6.4-2.1 6.7-.7.3-1.6.1-1.9-.4-.4-.6-.1-1 .5-1s.8-.5.4-1.1c-1.2-2-2.6-8.3-3.4-15.4-.4-3.9-1.3-12.9-1.9-20-1.6-17.8-3-26.3-4.7-28-.8-.7-1.4-2-1.4-2.8 0-.7-.3-1.7-.7-2.1-.9-.8-1.2-2.6-1.7-9.6-.9-10.2-.9-13.6-.4-14.5.3-.6.4-2.4.1-4-1.1-7.1-1.1-8.4.1-7.9.9.4 1-1.2.4-6.3-1.4-11.1-1.9-16.6-1.9-19.3.1-3.2-2.8-11-4-11-.5 0-.9-.9-.9-2s-.4-2-.9-2c-.6 0-2-1.8-3.2-4-1.2-2.2-3.1-4.2-4-4.5-1-.3-2.1-1.4-2.4-2.4-.6-1.9-6.5-5.1-9.5-5.1-1 0-2.2-.5-2.5-1-.3-.6-1.5-1-2.6-1s-2.6-.6-3.4-1.3c-.9-.9-2.9-1.2-6.8-.7-3.1.3-5.4.3-5.2-.1.4-.6-3.1-.7-7.5-.1zm16.9 83.9c1 1.2 3 2.7 4.3 3.4 1.4.6 4.2 3.1 6.2 5.4 2 2.4 3.6 4.7 3.6 5 0 .4-.7.5-1.5.2-.8-.4-1.7-.2-2 .3-.3.5-2.6 0-5.1-1.1-4.8-2.2-7.2-2.8-11.7-3.4-2.1-.2-2.6 0-1.8.8 2 2 1.1 3-2.1 2.3-6.6-1.4-7.4-1.6-13.3-2-4.9-.3-6.5 0-8.9 1.7-1.6 1.2-2.6 1.6-2.2.9 1.1-1.9-5.9-1.5-7.5.4-.7.8-2 1.3-3 1.1-.9-.3-2.3-.1-3 .4-.7.4-2.1.3-3-.2-1.2-.6-2-.5-2.5.2-.4.7-1 .7-1.6.1-.6-.6-2.2-.7-4.1-.1-2.4.7-3.3.5-4-.6-.4-.9-1.3-1.2-1.9-.9-.8.5-.9.1-.5-1.1.4-.9.2-2.4-.4-3.2-.9-1-.9-2-.1-3.8.6-1.3 2.3-3.2 3.8-4.2 2.2-1.4 4.5-1.7 11.8-1.5 6.2.2 10.4-.2 13.1-1.2 2.9-1 8.2-1.4 19.8-1.3 15.2.1 15.9.2 17.6 2.4zm-20.2 38.5c4.2.7 7.6 2 10.3 3.9 4.1 3 4.1 3 1.1 5.4-1.6 1.4-3.7 2.5-4.7 2.5-1.1 0-2.8.7-3.8 1.5-2.6 2-12.2 1.9-16 0-1.5-.8-3.9-1.5-5.1-1.5-2.5 0-4.8-1.8-6.6-5.2-1-1.8-.8-2.4 1.2-3.9 1.3-1 3.1-1.9 3.9-1.9.8 0 2.4-.7 3.5-1.6 2.1-1.5 2.3-1.5 16.2.8zm-107.9-.2c2.5 0 3.5.5 3.9 1.9.2 1 1.5 2.3 2.8 2.9 2.9 1.3 4.3 5.1 2.4 6.3-.8.5-2.2.9-3.1.9-1 0-1.8.4-1.8 1 0 1.6-4.1 3.2-9.4 3.5-2.8.2-5.7-.2-6.3-.7-.7-.6-2-.7-2.9-.4-2.2.8-6.5-1.1-8.6-3.9-1.4-1.8-1.5-3-.7-5.7.8-3.2 1.4-3.6 7.2-5.1 3.4-.9 7.8-1.4 9.7-1.2 1.9.3 5 .5 6.8.5zM320 657.5c1.4.9 7.1 1.5 6.6.7-.2-.4 4.9-.7 11.5-.7 6.5 0 11.9.2 11.9.5 0 .4 3.5 1.4 7.8 2.4 4.2.9 9.1 2.1 10.7 2.6 1.7.5 5.7 1.4 9 2 3.3.7 7.6 2.1 9.6 3.1s4.8 1.9 6.3 1.9c1.8 0 2.4.4 2 1.5-.4.8-1.6 1.5-2.8 1.5-2.2 0-7.7 3.2-7.9 4.6-.1.5-1.2 1.9-2.6 3.1-1.3 1.3-3.3 2.3-4.3 2.3-1.1 0-3.4.7-5.1 1.6-1.8.9-3.9 2-4.7 2.3-1.3.5-17.6.6-36.5.1-2.7-.1-8 0-11.7.1-5.1.2-7.3-.2-9.5-1.6-1.5-1.1-3.4-1.8-4.2-1.7-.7.2-1-.1-.6-.7.3-.6-.1-1.1-.9-1.1s-2-1-2.7-2.1c-.7-1.5-.8-1.9 0-1.5.7.5.9.1.5-.8-.3-.9-1-1.6-1.6-1.6-.5 0-2.2-1.5-3.9-3.2-1.6-1.8-2.9-2.9-2.9-2.5 0 .4-.6.2-1.4-.5-.8-.7-1.2-1.6-.9-2.1.2-.4 1.6-.7 3-.7 1.5 0 3.6-.9 4.8-2 1.1-1.1 3.1-2.1 4.3-2.3 1.2-.2 2.5-.6 2.8-1 .4-.4 1.4-.7 2.1-.7.8 0 2.5-1.1 3.8-2.4 2.3-2.3 4.9-2.7 7.5-1.1z'

new svgPathProperties(d).getTotalLength()

Results in Error: Malformed path data: "a" must have 7 elements and has 6: a6.69 6.69 0 01-5.1 1.6.

Apparently it is valid SVG, it is rendered by Chrome.

If I change the validation, it works:

-  a: 7,
+  a: 6,

I'll send a PR for it.

Kye Lewis · Answer 1 · Tue Jun 22 2021 10:12:34 GMT+0800 (China Standard Time)

I've just come across this, the issue seems to be that some svg generators assume that boolean flags need no separators between values.

In the above example:
a6.69 6.69 0 01-5.1 1.6.

is equivalent to a6.69 6.69 0 0,1-5.1 1.6.

Roger Veciana i Rovira · Answer 2 · Wed Jun 23 2021 05:16:30 GMT+0800 (China Standard Time)

Do you think it's worth accepting this strange a version?

Kye Lewis · Answer 3 · Wed Jun 23 2021 07:35:18 GMT+0800 (China Standard Time)

The cause in our case i've determined to be SVGO.

SVGO feels that it is a correct interpretation of the specs - see svg/svgo#1137

I'm happy enough working around it given that i know what's causing it now, but if svg-path-properties is implementing SVG 1.1 then it sounds like it's part of the spec (it wasn't in SVG 1.0).

elliptical-arc-argument:
    nonnegative-number comma-wsp? nonnegative-number comma-wsp? 
        number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair

Our path to coming across this issue was using svgr to convert svg to tsx for react / react-native- when importing them in to react-native-svg-animations, we get this error (because it uses svg-path-properties under the hood).

It looks like a pretty decent amount of work to the parser though for a somewhat specific, workaroundable scenario, so I wouldn't blame you for not making a change here (i also don't think i'd have time to write a PR for this either).