javascript - 在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作为我的输出。有没有办法做到这一点？

标签： javascripthtmlsvgmeasure

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