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 cordinate（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>

Answer 2

使用pathSegList界面：

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

Answer 3

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

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);

您也可以使用正则表达式，但可能并不简单。

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

3 个答案: