Dynamically find the path of SVG - css

Question

I have this SVG file
I want to know the equation of the line. is it possible? I need the equation to dynamically add some SVG points on this line in different positions. So, in that case, I know the x value but I need to calculate the y value.
Here is the source of the SVG file:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1366px" height="332px" viewBox="0 0 1366 332" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>#0.5xTimeline - Deactivated</title>
<desc>Created with Sketch.</desc>
<g id="🖥-Design---Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02-About-Us" transform="translate(0.000000, -989.000000)" fill-rule="nonzero" stroke="#EFEFEF" stroke-width="11">
<g id="HISTORY" transform="translate(-28.000000, 813.000000)">
<g id="Graphic---Timeline" transform="translate(0.000000, 182.000000)">
<path d="M0,38.8855723 C99.4313478,-10.5096141 202.976477,-12.845873 310.635387,31.8767959 C472.123752,98.9607991 512.237609,231.556286 773.130376,301.214063 C1034.02314,370.871839 1355.95795,229.12379 1417,164.042295" id="Timeline---Deactivated"></path>
</g>
</g>
</g>
</g>
</svg>

Answer 1

If you know that you have a function, that is a path that only ever goes left-to-right and never doubles back on itself, then you can scan along its length until you find the x-value that you want.
const x = 100; // known x-value
const path = document.getElementById('Timeline---Deactivated');
const pathLength = path.getTotalLength();
const range = [0, pathLength];
let guess, result;
for( let iterations = 0; iterations < 11; iterations++) {
guess = (range[0]+range[1])/2;
result = path.getPointAtLength(guess);
if( result.x < x) {
// target is to the right
range[0] = guess;
}
else range[1] = guess;
}
return result; // SVGPoint with result.x and result.y
The ideal number of iterations is based on the possible range of X values. In your case the path ends at (1417,164), so iterations should go to ceil(log_2(1417)) which is 11. If you have bigger graphs, you might need to make it 12, or you can just set it to 20 or something. It's not like it takes that many more steps to keep a high accuracy result.