使用javaScript解析SVG路径字符串以提取初始x，y坐标的最简单方法 [英] simplest way to use javaScript to parse SVG path string to extract initial x,y coordinates

问题描述

path[1].innerHTML 

返回

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

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

The first 2 digits after M are the x,y coordinates for the starting point of the SVG path.

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

返回 x 坐标 (5) 和

returns the x cordinate (5) and

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

返回正确的 y 坐标.问题是这些值可能是一位、两位或三位数字，这会破坏 substr() 的做法.

returns the correct y coordinate. The problem is the values may be single or double or triple digit numbers which will break the substr() way of doing it.

推荐答案

浏览器有一个 内置解析器，使用它，否则您将一生都在轮子重新发明和错误修复上.

Browsers have a parser built in, use it or you'll just spend your life on wheel reinventing and bugfixing.

Chrome 的注意事项，您需要使用 polyfill

Note for Chrome, you'll need to 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>

这篇关于使用javaScript解析SVG路径字符串以提取初始x，y坐标的最简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！