动态查找SVG的路径

Question

我有这个SVG文件

​

​

我想知道这条线的方程式。有可能吗？我需要方程动态添加一些SVG点在这条线上，在不同的位置。因此，在这种情况下，我知道x值，但我需要计算y值。

以下是SVG文件的来源：

<?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

如果你知道你有一个函数，这是一条只有从左到右的路径，并且永远不会翻回它自己，那么你可以沿着它的长度扫描，直到找到你想要的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或更多。这并不是说要保持高精度的结果还需要更多的步骤。