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>