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

Question

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

我对SVGPathElement API有些熟悉，但无法弄清楚如何使用任何调用来计算路径的部分长度。

我正在使用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））也是可能的，但这对我的目的来说太过分了。