src/geometry/Svg.js, SVGPathSeg deprecated in Chrome, will be removed

[erzahurak]

Chrome now reports:
SVGPathSeg is deprecated and will be removed in Chrome 48. See https://www.chromestatus.com/feature/5708851034718208.

will need replaced with:
https://svgwg.org/specs/paths/#InterfaceSVGPathData

there is a polyfill for this as well:
https://github.com/jarek-foksa/path-data-polyfill.js

[peterdemartini]

+1

[peterdemartini]

Google's recommended poly fill, https://github.com/progers/pathseg

[dcrockwell]

+1

[liabru]

I've added the polyfill to the demo, anyone else wishing to use it will need to include the polyfill in their code too.

It looks like rewriting the module to use the new standard would take a fair bit of work. I'm looking at other options for replacing it. Thanks guys.

[lehni]

I'ld like to make the suggestion to use your own SVG path data parser. We've done so in Paper.js, and the code is rather small, and has been heavily tested with all kinds of strange path data. I could split this into a separate module and add a more general purpose API to it, if this is of interest?

Here the code, it's about 120 LOC:

https://github.com/paperjs/paper.js/blob/develop/src/path/PathItem.js#L127

This would then also allow for the passing of an string containing SVG path-data to pathToVertices() instead of an SVG <path> element (both should work).

[liabru]

@lehni neat, can it output an array of absolute points for any given path?

[lehni]

@liabru yes that should be fairly easy to achieve. But converting the bezier curves to sequence of points is another challenge (that we have solved in in paper.js, but unfortunately the library is monolithic in nature)

[gizmooo]

I'ld like to make the suggestion to use your own SVG path data parser. We've done so in Paper.js, and the code is rather small, and has been heavily tested with all kinds of strange path data. I could split this into a separate module and add a more general purpose API to it, if this is of interest?

Here the code, it's about 120 LOC:

https://github.com/paperjs/paper.js/blob/develop/src/path/PathItem.js#L127

This would then also allow for the passing of an string containing SVG path-data to pathToVertices() instead of an SVG <path> element (both should work).

Yeeah! I got a function from a code that advised @lehni and I managed to do without Matter.Svg.pathToVertices()

function setPathData(pathData) {
  let parts = pathData && pathData.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/ig),
      coords;
  let array = [];

  for (let i = 0, l = parts && parts.length; i < l; i++) {
    coords = parts[i].match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);

    for (let j = 0; j < coords.length; j+=2) {
      array.push({
        x: +coords[j],
        y: +coords[j + 1]
      })
    }
  }

  return array;
}

It works in chrome and ios safari
No polyfill needed

[Saathvik-s]

@gizmooo I got the error pathData.match is not a function

[el1s7]

@liabru Any update on this? The polyfill causes performance issues and freezes the browser for a few seconds

[WCY-dt]

I solved this by importing pathseg and decomp before matter.js, it works.