获取点'；svg路径上的s-y坐标

我想我需要补充一些解释，我想问这个问题，因为太短的问题不符合质量标准。。。好笑

因此，问题是：

---

如何在特定的“x”坐标下获得svg路径上点的“y”坐标？

这并不简单，因为路径可能有多个点具有指定的

x

坐标

SVG DOM中没有内置函数来执行此操作。一个解决方案是沿着路径分段，自己做数学运算

或者，在

svgpatheElement

上有一个名为

getPointAtLength（len）

的内置函数。沿着路径传入一个长度，它将在该点返回x，y坐标。您可以沿着路径长度一步一步地计算出x坐标与所需的

x

交叉的位置。您可以从

svgpatheElement.getTotalLength（）函数中获取路径长度。这有点麻烦，你必须小心，不要错过曲线在你的
x
附近弯曲的点。但它应该起作用

我正在研究一个类似的问题，保罗的回答确实帮助了我

为了进一步说明@Paul LeBeau的答案，这里有一个小演示：


let path=document.getElementById（“路径”）；
让svg=document.getElementById（“svg”）；
//获取总长度的第一个重要函数
设totalLength=path.getTotalLength（）；
设交点=27；
对于（var i=0；i如果您知道路径的所有点，我认为比单步通过路径更有效的解决方案可能是搜索路径的
d
属性以查找特定的x坐标。然后使用regexp捕获y坐标。regexp可以这样使用：

const regex = new RegExp(`${x} ((\d*.\d*))`)
const match = regex.exec(d)

我以前考虑过沿着路径长度进行步进，但由于有多个点，我试图避免这种情况。虽然最终我采用了这种方法，但在我的例子中效果很好。我只是将其添加到我的代码中，但速度非常慢。这显然很大程度上取决于步进的大小-我使用了它，并将其放在下面的一点上它变得太不精确了，但还是把我的FPS减少了一半。还有其他想法吗？我发现了这个，有点酷，但有点过火：你所指的代码使用了
getPointAtLength（）
还有。听起来你可能在使用固定的步长。你应该做的是使用一个粗略的步长，直到你发现
x
指向搜索
x
的两边。然后根据你的搜索x在该范围内的位置来估计下一个长度。你只需猜几下就可以精确到我认为最好用二进制搜索你的路径，在给定的公差范围内找到所需的X点