如何测量 SVG 路径的子路径的长度？

Question

假设我有一个任意的 SVG 路径，并且用户在该路径上选择了两个点。如何计算这两点之间子路径的确切长度？

我对@9​​87654321@ 有点熟悉，但不知道如何使用任何调用来计算路径的部分长度。

我正在使用 D3，因此 D3 API 调用会非常好。

Answer 1

根据 Duopixel 的有用评论和 demo，这里有一个小函数，用于计算两个 x 坐标之间的路径距离：

function pathDistanceBetweenTwoPoints(path, x1, x2) {
    var pathLength = path.getTotalLength();
    var distance = 0, distance1;
    while (distance < pathLength && x1 > path.getPointAtLength(distance))
        distance1 = distance++;
    while (distance < pathLength && x2 > path.getPointAtLength(distance))
        distance++;
    return distance - distance1;
}

函数在O(n)中运行，这还不错。二进制搜索 (O(log n)) 也是可能的，但对我来说这太过分了。