动态找到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

如果您知道自己具有 function ，这是一条永远只能从左到右走，并且永远不会再翻过去的路径，那么您可以沿着其长度进行扫描，直到找到您想要的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左右。并非要采取更多步骤才能保持高精度结果。