SVGPathData chrome 48

Question

in chrome 48 was removed: SVGPathElement.pathSegList

this page W3C Editor’s Draft 19 January 2016 shows a new way to access to the segments list https://svgwg.org/specs/paths/#InterfaceSVGPathData

But, how to use it ? ( in the SVGPathElement the method "getPathData" not exists )

Answer 1

Chrome has not implemented the new getPathData and setPathData API.
You should use path data polyfill:

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

Here is a code sample:

//svg code:
//...
//<path d="M0,0 L100,50" id="mypath"></path>
//<script xlink: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); //2
console.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 data
console.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50"

Answer 2

Why not use the SVGPathSeg polyfill? Then you don't need to change any of your existing code.

Answer 3

Robert Longson's suggestion is a good one for now. The API you are referring to (getPathData, setPathData) is all brand new and has not been implemented yet. There might also be changes before it is implemented and available.