Question

我正在使用Matter.js SVG形状，并且使demo在本地工作，并且我试图不使用jQuery而使其工作。这是svg file供参考。

演示代码（以前使用$.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属性数据。

谢谢：）

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

0 个答案: