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

Question

path[1].innerHTML 

返回

  <path d="M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z" ....

M 后的前 2 位数字是 SVG 路径起点的 x,y 坐标。

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

返回 x 坐标 (5) 和

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

返回正确的 y 坐标。问题是值可能是一位、两位或三位数字，这将破坏 substr() 的执行方式。

Answer 1

浏览器有一个 parser built in ，使用它，否则您将把一生都花在重新发明轮子和修复错误上。

对于 Chrome，您需要注意 use a polyfill

var path = document.getElementById("p");
var item1 = path.pathSegList[0];
alert("first co-ordinate is " + item1.x + ", " + item1.y);

<svg>
    <path id="p" d="M 5,10 l0,0 l 15 ,0l0,15l-15,0l0,-15 z"/>
</svg>