I am working with a SVG path element as follows and if I have an array with the desired percentage, I can retrieve the exact coordinate at each of those percentages of the path by doing the following.
const circ = document.querySelector('.circ');
const len = circ.getTotalLength();
const pct = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
const coordCollector = [];
pct.forEach((a) => {
coordCollector.push(circ.getPointAtLength(a * len))
})
console.log(coordCollector);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div id="container" class="svg-container"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 720">
<rect class="vBoxRect" width="1536" height="720" fill="none" stroke="green"></rect>
<path class="circ" d="M384,552L440.42738422007744,533.665631459995L475.30142556433475,485.665631459995L475.30142556433475,426.3343685400051L440.42738422007744,378.3343685400051L384,360L327.57261577992256,378.334368540005L292.69857443566525,426.334368540005L292.69857443566525,485.6656314599949L327.57261577992256,533.665631459995L384,552" stroke="red" fill="none"></path>
</svg>
<!--d3 script-->
<script type="text/javascript"></script>
</body>
</html>
However, if I only have the path and an array of objects with raw coordinates, is it possible to calculate at which percentage of the path, they reside?
To be more precise, if I have an array of objects called rawCoord, how can I ask javascript to return an array identical to const pct = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
const circ = document.querySelector('.circ');
const len = circ.getTotalLength();
//for each of this, how can I ask javascript to return an array
//identical to const pct = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
const rawCoord = [
{
"x": 384,
"y": 552
},
{
"x": 440.4273986816406,
"y": 533.6656494140625
},
{
"x": 475.3014221191406,
"y": 485.6656188964844
},
{
"x": 475.3014221191406,
"y": 426.3343811035156
},
{
"x": 440.4273681640625,
"y": 378.3343505859375
},
{
"x": 383.9999694824219,
"y": 360.0000305175781
},
{
"x": 327.5726013183594,
"y": 378.3343811035156
},
{
"x": 292.6985778808594,
"y": 426.33441162109375
},
{
"x": 292.6986083984375,
"y": 485.6656494140625
},
{
"x": 327.5726318359375,
"y": 533.6656494140625
},
{
"x": 384,
"y": 552
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div id="container" class="svg-container"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 720">
<rect class="vBoxRect" width="1536" height="720" fill="none" stroke="green"></rect>
<path class="circ" d="M384,552L440.42738422007744,533.665631459995L475.30142556433475,485.665631459995L475.30142556433475,426.3343685400051L440.42738422007744,378.3343685400051L384,360L327.57261577992256,378.334368540005L292.69857443566525,426.334368540005L292.69857443566525,485.6656314599949L327.57261577992256,533.665631459995L384,552" stroke="red" fill="none"></path>
</svg>
<!--d3 script-->
<script type="text/javascript"></script>
</body>
</html>
