动态查找SVG的路径答案

【问题标题】：Dynamically find the path of SVG动态查找SVG的路径
【发布时间】：2019-10-18 21:19:30
【问题描述】：

我有这个 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>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/… 和 developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/…
如果您有路径公式并且知道 x 值，您可以在循环中计算 y 值。您可以使用getPointAtLength() 方法或多或少地做同样的事情。只是这一次您不知道 x，但您知道到该点的路径的长度。您可以使用getTotalLength() 获取路径的长度。一旦你有了路径的长度，你就可以循环for(let i = 0; i < n; i++){path.getPointAtLength(i*pathLength/n)}

标签： css xml math svg equation

【解决方案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左右。保持高精度结果并不需要更多的步骤。

【讨论】：