Если вы знаете, что у вас есть функция , то есть путь, который идет только слева направо и никогда не удваивается назад, тогда вы можете сканировать по его длине, пока не найдете x -значение, которое вы хотите.
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
Идеальное количество итераций основано на возможном диапазоне значений X. В вашем случае путь заканчивается в (1417,164), поэтому итерации должны идти в ceil (log_2 (1417)), который равен 11. Если у вас есть большие графики, вам может потребоваться сделать его 12, или вы можете просто установить его в 20 или что-то. Это не значит, что для достижения высокой точности требуется еще много шагов.