Skip to content

Path2D: support multiple sub-paths (M commands) in parseSVGPath #1253

@obiot

Description

@obiot

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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions