SVGPathData chrome 48

Question

在chrome 48中删除了： SVGPathElement.pathSegList

本页W3C编辑的草案2016年1月19日显示了访问段列表的新方法https://svgwg.org/specs/paths/#InterfaceSVGPathData

但是，如何使用它？ （ 在SVGPathElement中，方法“getPathData”不存在 ）

Answer 1

为什么不使用SVGPathSeg polyfill ？ 然后，您无需更改任何现有代码。

Answer 2

Robert Longson的建议现在很好。 您所指的API（ getPathData ， setPathData ）都是全新的，尚未实现。 在实施和可用之前可能还会有变化。

Answer 3

Chrome尚未实现新的getPathData和setPathData API。
您应该使用路径数据polyfill ：

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

这是一个代码示例：

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

回到

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

对于发现与SVG 1.1不兼容的浏览器。

此外，如果浏览器是以前支持SVG 1.1的品牌，则打印一条消息，建议用户升级回旧版本（甚至可能考虑使用不同的，更稳定的浏览器品牌，可能是设计的浏览器更多地考虑开发人员在缺乏曾经完美运行的功能方面所需的时间，然后将其删除以便无需替换它们，正如ktejik所指出的那样。