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
But, how to use it ? ( in the SVGPathElement the method "getPathData" not exists )
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/specs/paths/#InterfaceSVGPathData
But, how to use it ? ( in the SVGPathElement the method "getPathData" not exists )
Share Improve this question edited Jan 21, 2016 at 13:33 Ian 13.9k6 gold badges54 silver badges79 bronze badges asked Jan 21, 2016 at 9:08 Rik Del MarRik Del Mar 711 silver badge3 bronze badges4 Answers
Reset to default 2Chrome has not implemented the new getPathData and setPathData API.
You should use path data polyfill:
https://github./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"
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.
Fall back to
path.setAttribute('d', ...)
for a browser found to be inpatible with SVG 1.1.
Furthermore, if the browser is of a brand that previously supported SVG 1.1, then print a message suggesting that the user upgrade back to the older version (and possibly even consider a different, more stable, brand of browser, one that may have been designed with more consideration of the time required of developers to work around the lack of features that once worked perfectly well, and then were removed for the purpose of replacing them with nothing, as ktejik has noted).
Why not use the SVGPathSeg polyfill? Then you don't need to change any of your existing code.
If you want to use the new API, Firefox 136 implements getPathData and setPathData natively. For Chrome and Safari there's a polyfill.