獲取SVG路徑上點的y座標

我想我需要添加一些解釋，那我要問這個問題，因爲過短的問題沒有質量標準......有趣......獲取SVG路徑上點的y座標

所以，在這裏是這樣的問題：如何獲得svg路徑上某點在'x'座標上的'y'座標？

2014-03-25 Janusz Krawiec

好吧，這不是直截了當的，因爲一個路徑可能有多個指定的座標爲x的點。

SVG DOM中沒有內置函數來執行此操作。一種解決方法是沿着路徑段自己做數學。

或者，在SVGPathElement上有一個內置函數，稱爲getPointAtLength(len)。你沿着路徑傳遞一段長度，它將返回當前的x，y座標。您可以沿着路徑長度前進，找出x座標穿過您想要的x的位置。您可以從SVGPathElement.getTotalLength()函數獲取路徑長度。這有點混亂，你必須小心，你不要錯過曲線在你的x附近彎曲的點。但它應該工作。

See here for more information on these functions.

來源

2014-03-25 15:10:42

我想到了前沿路徑長度步進，但竭力避免因爲多點吧。儘管最後我終於採用了這種方法，在我的情況下，結果很好。 –

我剛把這段代碼添加到我的代碼中，但速度非常慢。這顯然很大程度上取決於步長 - 我玩過它並把它放在一個低於這個點的位置，這樣它就變得太精確了，而且它仍然將我的FPS減半。有沒有其他想法？我發現這很酷，但有點矯枉過正：http://bl.ocks.org/mbostock/8027637 –

你指出的代碼也使用'getPointAtLength（）'。這聽起來像你可能會使用固定的步長。你應該做的是用一個粗略的步驟，直到你找到'x'兩邊的'x'點。然後根據您的搜索x在該範圍內的位置估算下一個長度。它只應該採取一些猜測來獲得準確的容忍度。 –

獲取SVG路徑上點的y座標

回答

相關問題