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>