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

但是它返回奇怪的值。
我做错了什么？我希望path的值可以是正值和正常值，例如在svg路径的开始，中间和结尾。

以下是示例：

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

框应位于路径的中间

Answer 1

您的框位于路径的中间。您的路径从底部开始，一直延伸到顶部，然后再次回到底部。因此，路径的中点位于图形的顶部。