simplest way to use javaScript to parse SVG path string to extract initial x,y coordinates - Stack Overflow

admin管理员组

文章数量:1419232

path[1].innerHTML 

returns

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

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)

returns the x cordinate (5) and

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

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.

path[1].innerHTML 

returns

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

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)

returns the x cordinate (5) and

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

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.

• javascript
• svg

Share Improve this question Follow edited Jan 15, 2018 at 23:13 jojojohn asked Jan 15, 2018 at 23:05 jojojohnjojojohn 75322 gold badges1010 silver badges1919 bronze badges 2

• So... don't rely on fixed indexes? You can use a regex or token-based parsing (e.g. split) – RaphaMex Commented Jan 15, 2018 at 23:21
• Or just use the built in methods and don't roll your own, likely buggy implementation. – Robert Longson Commented Jan 16, 2018 at 0:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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>

getPathData()

You can also use getPathData() method with a polyfill (currently still a draft not natively supported).

let path = document.querySelector('#path');
let pathData = path.getPathData();
let M = pathData[0]; //first M mand
let [Mx, My] = M.values;
console.log('M coordinates:', Mx, My);

<svg width="20px" height="20px" viewBox="5 10 15 15">
  <path id="path" d="M5 10l0 0l15 0l0 15l-15 0l0-15z" />
</svg>

<script src="https://cdn.jsdelivr/npm/path-data-polyfill@latest/path-data-polyfill.min.js"></script>

Normalize path d attribute and split to array

The svg d attribute allows many shorthand notations like

• optional space between mand letters and values: M1 1, M 1 1
• ma, space or minus (only for negative values) as delimiters M -1,-1, M -1 -1, M-1-1
• concatenated floating point values like M.5.5, M 0.5 0.5
• and others like repeated implicit mands m.5.5 0 0, M 0.5 0.5 l0 0

That's why we need to normalize/sanitize it before splitting.

However, if you only need the M starting coordinates of a path we can take a shortcut

let d = path1.getAttribute('d');
let M = getMCoordinates(d);
console.log(M);



function getMCoordinates(d){
  
  let dArray = d
  // remove first M 
  .replace(/[Mm]/g, "")
  // remove new lines and tabs
  .replace(/[\n\r\t]/g, "")
  // replace ma with space
  .replace(/,|-/g, " ")
  // depose multiple decimal delimiters like 0.5.5 => 0.5 0.5
  .replace(/(\.)(?=(\d+\.\d+)+)(\d+)/g, " $1$3 ")
  // split multiple zero valuues like 0 05 => 0 0 5
  .replace(/( )(0)(\d+)/g, "$1 $2 $3")
  .split(" ")
  .filter(Boolean);
    
  let M = {x: +dArray[0], y: +dArray[1]}
  return M;
  
}

<svg viewBox="0 0 100 100">
<!-- what a mess, but perfectly valid ... -->
  <path id="path1" d="
      
                      m.5.35.7 0 0 l 15    0l0,15l-15,0 l0,-15 z
"/>
</svg>

See codepen example for a more plete regex parser.

A simple way is to split your string based on its known format, and get your x,y where you expect them:

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

You can also use regex, but it may not be simpler.

Use the pathSegList interface:

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

本文标签：