使用javaScript解析SVG路径字符串以提取初始x，y坐标的最简单方法

返回

path[1].innerHTML 

返回x坐标（5）和

返回正确的y坐标。

---

问题是这些值可能是一位、两位或三位数字，这将破坏substr（）的操作方式。

一种简单的方法是根据字符串的已知格式拆分字符串，并在期望的位置获取x，y：

path[1].innerHTML.substr(13,2) 

---

您也可以使用regex，但它可能并不简单。

使用

路径seglist

界面：

const path = "M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z",
      splitted = path.split(" ")[1].split(","),
      x = splitted[0],
      y = splitted[1];
console.log(x,y);

浏览器有一个新的功能，使用它，否则你将把一生都花在重新发明和修复错误上

注意：对于Chrome，您需要

var path=document.getElementById（“p”）；
var item1=path.pathSegList[0]；
警报（“第一坐标为“+item1.x+”，“+item1.y”）

所以。。。不依赖固定索引吗？您可以使用正则表达式或基于令牌的解析（例如split），也可以只使用内置方法，而不使用自己的、可能存在错误的实现。这样您就不会捕获到同样有效的数据。它会将“M5”作为第一个字符串。对不起，您是对的，但我可以给你一个失败的例子：使用其他空白字符，或者像“M5\n\t10…”中的多个。要点是：您必须考虑列表中列出的所有可能性，而且还有一些可能超出简单拆分的范围。这就是SVG路径可能变得复杂的原因。我回答了字符串的问题，这很简单。如果svg变得更复杂，为了正确处理它，我建议不要解析字符串。非常感谢-它对我来说很好。。。无论如何，我都是自己生成路径的，所以我知道之前的格式…注意：9/6/2018 9:08 PST这是抛出一个控制台错误。刚刚在Chrome、FF和Edge中尝试过。Chrome和FF抛出了错误。Edge（值得注意的是）not.FF不需要polyfill来读取内容，也不会抛出错误。我刚试过。你能确认你是在Chrome上使用polyfill吗？它不使用polyfill，所以不能在Chrome上使用。不过，它在Firefox上确实对我有用。
path[1].innerHTML.substr(13,2) 

const path = "M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z",
      splitted = path.split(" ")[1].split(","),
      x = splitted[0],
      y = splitted[1];
console.log(x,y);

var path = document.querySelector('path');
var moveto =  path.pathSegList[0]; // always the first movoto command
var x = movoto.x, y = moveto.y