microsoft / microsoft/maker.js
SVG Import - some paths fail to import
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 302
- Avg merge
- 21h 28m
- Merged PRs (30d)
- 5
Description
Hi,
I noticed makerJs sometimes failed to import some SVG paths generated by other libraries.
M 0 0 L 10 0 will import ok.
M 0 0 10 0 will fail to import.
The SVG Move Path command spec mentions:
Move the begining of the next subpath to the coordinate x,y. All subsequente pair of coordinates are considered implicite absolute LineTo (L) command.
I suspect the SVG Importer is not handling this part of the spec.
Simple demo below (can copy and paste into https://maker.js.org/playground):
var makerjs = require('makerjs');
// Draw a square from origin 0,0 with sides of 10 units.
// Equivalent to:
// <svg xmlns="http://www.w3.org/2000/svg">
// <path stroke="red" fill="none" d="M 0 0 L 10 0"/>
// <path stroke="red" fill="none" d="M 10,0 L 10,10"/>
// <path stroke="red" fill="none" d="M 10 10 0 10"/>
// <path stroke="red" fill="none" d="M 0,10 0,0"/>
// </svg>
var svgTestPaths =
{
path1: "M 0 0 L 10 0", // Top (ok)
path2: "M 10,0 L 10,10", // Right (ok)
path3: "M 10 10 0 10", // Bottom (failed)
path4: "M 0,10 0,0" // Left (failed)
};
this.models =
{
path1: makerjs.importer.fromSVGPathData(svgTestPaths.path1),
path2: makerjs.importer.fromSVGPathData(svgTestPaths.path2),
path3: makerjs.importer.fromSVGPathData(svgTestPaths.path3),
path4: makerjs.importer.fromSVGPathData(svgTestPaths.path4)
};
this.notes =
[
'# SVG path import test',
'Draw four sides of a square using various SVG Path syntax. ' +
'Note the bottom and left paths fail to import'
].join('\n');
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the makerjs.importer.fromSVGPathData entry point and trace how SVG move-path coordinates are parsed. Use the provided path3 and path4 reproduction alongside the explicit-L examples. Done means repeated coordinate pairs after an M command import as line segments and both shorthand paths produce the expected square sides.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100