使用 JavaScript 获取 SVG 中最长线段的长度

Question

我想找到一种方法来获取 SVG 路径中最长线段的长度。由于路径可以从一个点跳转到另一个点，因此

getTotalLength()

命令不起作用。作为一个简单的示例，请查看以下路径：

<path d="
    M 0 0  L 100 0
    M 0 10 L 50 10
    M 0 20 L 150 20
">

虽然

getTotalLength()

输出

300

，但我希望

150

作为我的输出。 有办法实现吗？

Answer 1

我找到了解决问题的方法。它的工作原理是将路径分成多个段并分别测量：

function maxSectionLength(path){
    let segments = path.attributes.d.value.split(/(?=[m,M])/),
        testPath = document.createElementNS('http://www.w3.org/2000/svg',"path"),
        max = 0;
    for(let d of segments){
        testPath.setAttributeNS(null, "d", d)
        max = Math.max(max,testPath.getTotalLength());
    }
    return max;
}

Answer 2

您可以使用此函数来计算两点之间的距离：

function dist(x1,y1, x2,y2) {
  let dx = x2 - x1;
  let dy = y2 - y1;
  return Math.sqrt(dx * dx + dy * dy);
}

在您的情况下，最后一行从

x1=0; y1=20

开始，到

x2=150; y2=20

结束

当然，您可能还需要一种方法来拆分

d

属性并提取 x1,y1,x2,y2 的值。

我希望这有帮助。