Skip to content
Advertisement

How to get all corners of path?

I have a SVG path.

How to get all extremum points from this path? (points of corners)?

I have tried to get all points using this:

 let totalLength = path.getTotalLength();

 for (var i = 0; i < totalLength; i++) {
    let point = path.getPointAtLength(i);
 }

For exmaple from this Path I need to get coordinates of 4 points, because it is rectangle:

<path id="f0" d="M1.825,-11.000 1.825,-363.650 710.925,-363.650 710.925,-11.000z"></path>

Advertisement

Answer

The getPointAtLength() method gets any point along an SVGGeometryElement regardless of if it’s a corner or not. There isn’t a built-in SVG method for just getting corners.

However, the corners are defined in the d path attribute. You could parse them from that, so long as the path only uses absolute coordinates and not relative ones:

const coordinates = document
  .getElementById('f0')
  .getAttribute('d')
  .split(' ')
  .map(pair => pair
    .split(',')
    .map(n => parseFloat(n.replace(/[A-z]/g,'')))
  )
  
console.log(coordinates)
    
<svg>
  <path id="f0" d="M1.825,-11.000 1.825,-363.650 710.925,-363.650 710.925,-11.000z"></path>
<svg>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement