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

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions