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

您可以使用此功能计算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的值的方法。

我希望这会有所帮助。

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

2 个答案: