获取 svg unsig 中最长线段的长度 javascript

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 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 的值。

希望对您有所帮助。

Answer 2

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

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;
}

获取 svg unsig 中最长线段的长度 javascript

Get length of longest line segment in svg unsig javascript

html

javascript

svg

measure