In Chrome 48, PathSegList is removed. And as I read in the answers to another question "Alternative for deprecated SVG pathSegList", Chrome is providing a new API, but I guess this new API is not yet available. What is another alternative and how can I use it. I know this is duplicate, but the link I mentioned is not helping me.
Asked
Active
Viewed 1,955 times
7
-
Why does the polyfill mentioned in one of the linked answers not help you? – Robert Longson Feb 01 '16 at 07:46
-
ok . Now I have added poly-data-polyfill.js in my app. But what is replacement for SVGPathSeg.PATHSEG_MOVETO_REL , createSVGPathSegMovetoAbs and other similar constants and APIs ? – Harshal Feb 01 '16 at 07:53
-
The polyfill defines replacements. https://github.com/progers/pathseg/blob/master/pathseg.js#L20 – Robert Longson Feb 01 '16 at 07:59
-
do I need to add pathSeg.js too ? – Harshal Feb 01 '16 at 08:02
-
What do you mean *too*? Did you read the polyfill documentation? – Robert Longson Feb 01 '16 at 08:03
-
Possible duplicate of [Alternative for deprecated SVG pathSegList](https://stackoverflow.com/questions/34352624/alternative-for-deprecated-svg-pathseglist) – KyleMit Dec 04 '18 at 01:09
1 Answers
3
You do not need path seg polyfill (pathSeg.js).
With path data polyfill, you can edit path data as a common array object.
Use path data polyfill to work with new API. It's recommended.
var path = document.querySelector('path'); //your <path> element
//Be sure you have added the pathdata polyfill to your page before use getPathData
var pathdata = path.getPathData();
console.log(pathdata);
/*
you will get an Array object contains all path data details
like this:
[
{ "type": "M", "values": [ 50, 50 ] },
{ "type": "L", "values": [ 200, 200 ] }
]
*/
//replacement for createSVGPathSegMovetoRel and appendItem
pathdata.push({ type: 'm', values: [200, 100] });
path.setPathData(pathdata);
//replacement for createSVGPathSegMovetoAbs and appendItem
pathdata.push({ type: 'M', values: [300, 120] });
path.setPathData(pathdata);
//replacement for createSVGPathSegLinetoAbs and appendItem
pathdata.push({ type: 'L', values: [400, 120] });
path.setPathData(pathdata);
console.log(path.getAttribute('d'));
//create a new path data array
var pathdata = [
{ "type": "M", "values": [50, 50] },
{ "type": "L", "values": [200, 200] }
];
path.setPathData(pathdata);
console.log(path.getAttribute('d'));
