Skip to content

SVG paths with Z inside without space after it get mangled #4072

@p-himik

Description

@p-himik

Reproduction requires vega-embed since without there's no SVG path parsing.
It can be done by using the below spec at https://vega.github.io/editor/ and switching to the Canvas rendering in the Settings panel.

{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "data": [
    {
      "name": "shapes",
      "values": [
        {"x": 0, "path": "M-1-1H1V1H-1Z"},
        {"x": 210, "path": "M-1-1H1V1H-1ZM0-1 0 1"}
      ]
    }
  ],
  "marks": [
    {
      "type": "path",
      "from": {"data": "shapes"},
      "encode": {
        "enter": {
          "path": {"field": "path"},
          "stroke": {"value": "black"},
          "x": {"field": "x"},
          "scaleX": {"value": 100},
          "scaleY": {"value": 100}
        }
      }
    }
  ]
}

Notice how the left side of the second square has disappeared. Adding a space after Z in the second path fixed it.

Image

I did a very superficial check just for this case and it seems that changing this line to const commandPattern = /(?:[mlhvcsqta]([^mlhvzcsqta]+))|z/gi; might work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugFor bugs or other software errors

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions