CODEWITHSUNDEEP
svgd3.js
shashank chaudhry
shashank chaudhry

Reputation: 33

SVG path error: <path> attribute d: Expected number

I'm using a layout library which is producing some paths for me that I'm trying to transform into SVG paths. Most paths seem fine, but a few give errors and I've not been able to figure out why.

Example:

<path d=" M0 0 C  0 90,  56 90,  56 279,  163 279, 163 309 z"></path>

I have a JSFiddle that you can run and see the error in the console here.

The error I get is:

Error: attribute d: Expected number, "…63 279, 163 309 z".

Upvotes: 2

Views: 13402

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

So you need to make sure path data is consistent with SVG's standard: https://www.w3.org/TR/SVG11/paths.html#DAttribute

If you are using comma to separate values, then it should be used consistently:

"M0,0 C0,90 56,90 56,279 163,279 163,309 z"

If not using comma:

"M 0 0 C 0 90 56 90 56 279 163 279 163 309 z"

UPDATE: ccprog is correct int he comments that consistency is not a requirement. So its more of a convenience / practice to keep things consistent.

Now the issue with the error that you observe in the console is due to the rule how path letters can be eliminated:

The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100 200 L 200 100 L -100 -200" and use "M 100 200 L 200 100 -100 -200" instead).

Basically in your case browser believes you are using Cubic Bezier curves in succession:

"M0,0 C0,90 56,90 56,279 C163,279 163,309 z"

So it interprets "z" as the last coordinate it expects for the Cubic Bezier curve.

You can eliminate error by adding a missing point or using different command explicitly.

Upvotes: 3

Related Questions