javascript - SVG getPointAtLength() 返回无效坐标

Question

我有一个 svg 路径，我想借助 getPointAtLength(n) 方法获取该路径的实际坐标。

var  path = document.getElementById("path1");
var  pathLen = path.getTotalLength();

alert(pathLen);

var posMin = path.getPointAtLength(0);
var posMid = path.getPointAtLength(Math.ceil(pathLen / 2));
var posMax = path.getPointAtLength(pathLen);

alert(posMin.x + ', ' + posMin.y);
alert(posMid.x + ', ' + posMid.y);
alert(posMax.x + ', ' + posMax.y);

但它返回奇怪的值。
我做错了什么？我希望路径具有正值和正常值，例如在 svg 路径的开始、中间和结束处。

这是一个示例:

https://jsfiddle.net/9xLc6q3n/9/

盒子应该位于路径的中间

Answer 1

您的盒子位于您路径的中间。您的路径从底部开始，向上到达顶部，然后再次向下返回底部。因此，路径的中点位于形状的顶部。