如何測量SVG路徑的子路徑的長度？

Question

假設我有一個任意的SVG路徑，並且用戶在該路徑上選擇了兩個點。 如何計算這兩點之間的子路徑的確切長度？

我對SVGPathElement API有點熟悉，但無法弄清楚如何使用任何調用來計算路徑的部分長度。

我正在使用D3，因此D3 API調用會非常好。

Answer 1

基於Duopixel的有用注釋和演示 ，這是一個用於計算兩個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） ）也是可能的，但是對於我的目的來說這太過分了。