Alternative For Deprecated Svg Pathseglist

I'm writing a Leaflet plugin that extends the polyline functionality. In the my plugin I'm accessing the path segments using the SVGPathSegList interface. But according to the Chro

Solution 1:

@holger-will gave some very useful links.

You can modify your js code to use the new API.

for example: Use var pathData = path.getPathData() instead of old var segs = path.pathSegList; Use pathData[1].values[4] instead of old path.pathSegList.getItem(1).x Use path.setPathData(pathData) to update the path element instead of old path.pathSegList.appendItem/insertItem/removeItem

Include the path-data-polyfill.js for browsers which have not supported the new API. (Chrome 50 still has not implemented getPathData and setPathData. There may be a long way...)

Here is a code sample:

//svg code://...//<path d="M0,0 L100,50" id="mypath"></path>//<script href="/js/path-data-polyfill.js"></script>//...//js code:var path = document.getElementById('mypath');
var pathdata = path.getPathData();
console.log(pathdata);
console.log(pathdata.length); //2console.log(pathdata[0].type); //"M"console.log(pathdata[0].values); //[0,0]console.log(pathdata[1].type); //"L"console.log(pathdata[1].values); //[100,50]
pathdata.push({type: "C", values: [100,-50,200,150,200,50]}); //add path segment
path.setPathData(pathdata); //set new path dataconsole.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50"

path data polyfill: https://github.com/jarek-foksa/path-data-polyfill