在Chrome 48中不推荐使用PathSegList并将其删除

时间:2016-02-01 06:19:51

标签: html5 google-chrome svg

在Chrome 48中,删除了PathSegList。当我读到另一个问题Alternative for deprecated SVG pathSegList的答案时,Chrome正在提供一个新的API,但我想这个新的API尚不可用。什么是另一种选择,我该如何使用它。我知道这是重复的,但我提到的链接并没有帮助我。

1 个答案:

答案 0 :(得分:3)

您不需要路径seg polyfill(pathSeg.js)。

使用path data polyfill,您可以将路径数据编辑为公共数组对象。

使用path data polyfill处理新API。它是推荐的。

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'));