javascript - 如何使用纯 JavaScript 保存 SVG d 属性路径元素？

Question

我正在使用Matter.js SVG 形状并让演示在本地工作，并且我试图让它在不使用 jQuery 的情况下工作。这是一个svg 文件供参考。

演示代码（之前使用以下方法检索数据$.get('url-to-svg')：

$(data).find('path').each(function(i, path) {
  console.log(Svg.pathToVertices(path));
  vertexSets.push(Svg.pathToVertices(path));
});

jQuery 路径数据巧妙地将 d 属性隔开：

<path xmlns="http://www.w3.org/2000/svg" class="st0" d="M 1 75.5 V 58.5 H 140 L 197 1.5 L 322 157.5 L 367 98.5 H 420 V 119.5 H 369 L 320 179.5 L 197 21.5 L 142 74.5 L 1 75.5 z"/>

---

到目前为止我的代码（我能够执行 AJAX svg 调用来获取数据）：

let dataXml = parser.parseFromString(data, 'text/xml');
let path = dataXml.getElementsByClassName('st0')[0]; // i know about chaining .getAttribute('d') to get the d attribute

我注意到我的路径数据看起来像这样（没有空格）：

<path xmlns="http://www.w3.org/2000/svg" class="st0" d="M1,75.5v-17h139l57-57l125,156l45-59h53v21h-51l-49,60l-123-158l-55,53L1,75.5z"/>

---

我正在寻找的 jQuery 最终结果是顶点数组：

[
  0: {x: 1, y: 75.5}
  1: {x: 1, y: 58.5}
  ...
]

我不确定 jQuery 正在执行哪种类型的循环函数来遍历 path 元素中的所有 d 属性数据。

谢谢 ：）

标签： javascriptjquerysvgmatter.js