Description
parseSVGPath currently treats the entire SVG string as a single continuous path. SVG strings containing multiple M (moveTo) commands are not handled as separate sub-paths, which causes incorrect fill results for shapes with holes or disconnected regions (e.g. a donut, text outlines, a shield with an inner emblem).
Current behavior
All points from multiple M commands are merged into one flat array, and triangulatePath (earcut) treats them as a single polygon. This produces wrong triangulation for shapes that require holes or separate regions.
Expected behavior
Multiple M commands should define separate sub-paths. The first sub-path is the outer boundary, and subsequent sub-paths are treated as holes. triangulatePath should pass hole indices to earcut for correct triangulation.
Implementation notes
- Track sub-path start indices when a new
M command is encountered
- Pass hole start indices to earcut via its second parameter
- Canvas renderer replay should insert
moveTo at each sub-path boundary instead of continuous lineTo
- WebGL GL_LINES stroke rendering already works with paired points, but needs
moveTo gaps between sub-paths
Related: #1198 (SVG arc support)
Description
parseSVGPathcurrently treats the entire SVG string as a single continuous path. SVG strings containing multipleM(moveTo) commands are not handled as separate sub-paths, which causes incorrect fill results for shapes with holes or disconnected regions (e.g. a donut, text outlines, a shield with an inner emblem).Current behavior
All points from multiple
Mcommands are merged into one flat array, andtriangulatePath(earcut) treats them as a single polygon. This produces wrong triangulation for shapes that require holes or separate regions.Expected behavior
Multiple
Mcommands should define separate sub-paths. The first sub-path is the outer boundary, and subsequent sub-paths are treated as holes.triangulatePathshould pass hole indices to earcut for correct triangulation.Implementation notes
Mcommand is encounteredmoveToat each sub-path boundary instead of continuouslineTomoveTogaps between sub-pathsRelated: #1198 (SVG arc support)