SVGPathData chrome 48

Question

in chrome 48 was deleted: SVGPathElement.pathSegList

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

But how to use it? (the method "getPathData" does not exist in SVGPathElement )

Answer 1

Why not use the SVGPathSeg polyfill ? Then you do not need to change any of the existing codes.

Answer 2

Robert Longson's offer is now good. The API you mean ( getPathData strong>, setPathData strong>) is completely new and not yet implemented. There may also be changes before they are implemented and available.

Answer 3

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

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

Here is a sample code:

//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 4

Go back to

 path.setAttribute('d', ...) 

for a browser that is not compatible with SVG 1.1.

Also, if the browser has a brand that previously supported SVG 1.1, print a message saying that the user is upgrading to an older version (and maybe even considering another more stable browser brand that might have been developed with a lot of time taken into account, necessary for developers to eliminate the lack of functions that once worked perfectly, and then were removed in order to replace them with nothing, as ktejik noted).