Javascript path.getTotalLength（）似乎返回了错误的值？

我试图得到一条路径的总长度，基本上是一条直线：

结果大约是312，这与我手工计算的结果大致相同

但是，如果我添加更多中间点（视觉上仍应为直线）：

结果现在是347。。。知道为什么吗？ 下面是我从另一篇文章中借来的测试代码

谢谢

HTML:

Javascript:

var path1 = document.getElementById('lens_right');
var path1Len = path1.getTotalLength();

var strokeLen = path1Len; // easier troubleshooting

document.getElementById('log').innerHTML = 'path length: ' + path1Len;

path1.style.strokeDasharray = strokeLen;
path1.style.strokeDashoffset = -strokeLen;

// add/remove border on hover
document.body.onmouseover = function() {
    path1.style.strokeDashoffset = '0';
}

document.body.onmouseout = function() {
    path1.style.strokeDashoffset = -strokeLen;
}

---

不，你的第二个例子不是一条直线。它由两条独立的路径组成。第二个是

M 183.64,330.72 C 197.83,380.81 193.1,364.13 188.38,347.46

---

立方贝塞尔中间点超出终点，路径循环到（约）

193.1364.13

，然后返回到

188.38347.46

谢谢！！中间的曲线控制点看起来很可疑，看看我是如何得到它们的。。。

var path1 = document.getElementById('lens_right');
var path1Len = path1.getTotalLength();

var strokeLen = path1Len; // easier troubleshooting

document.getElementById('log').innerHTML = 'path length: ' + path1Len;

path1.style.strokeDasharray = strokeLen;
path1.style.strokeDashoffset = -strokeLen;

// add/remove border on hover
document.body.onmouseover = function() {
    path1.style.strokeDashoffset = '0';
}

document.body.onmouseout = function() {
    path1.style.strokeDashoffset = -strokeLen;
}

M 183.64,330.72 C 197.83,380.81 193.1,364.13 188.38,347.46