在SVG路径上获取点的Y坐标 [英] Get point's y coordinate on svg path

问题描述

我想我需要补充一些解释，我想问这个问题，因为太短的问题并不符合质量标准...很有趣...

I guess I need to add some explanation, that I want to ask this question, because too short question doesn't quality standards... funny...

因此，这是一个问题: 如何在特定的"x"坐标处获取svg路径上的点的"y"坐标?

So, here is the question: How I can get the 'y' coordinate of the point on svg path at a specific 'x' coordinate?

推荐答案

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

Well this is not straightforward, because a path could have multiple points with the specified x coordinate.

SVG DOM中没有内置函数可以执行此操作.一种解决方案是逐步遍历路径段并自己进行数学计算.

There is no built-in function in the SVG DOM to do this. One solution is to step along the path segments and do the maths yourself.

或者，在SVGPathElement上有一个称为getPointAtLength(len)的内置函数.您沿路径传递了一段长度，它将在该点返回x，y坐标.您可以沿着路径长度步进，并计算出x坐标与所需的x相交的位置.您可以从SVGPathElement.getTotalLength()函数获取路径长度.这有点纠结，您必须小心，不要错过曲线在x附近弯曲的点.但是应该可以.

Alternatively, there is a built in function on SVGPathElement called getPointAtLength(len). You pass in a length along the path and it will return the x,y coords at that point. You could step along the path length and work out where the x coordinate crosses your desired x. You can get the path length from the SVGPathElement.getTotalLength() function. It's a bit of a kludge and you have to be careful you don't miss points where the curve bends near your x. But it should work.

有关这些功能的更多信息，请参见此处.

这篇关于在SVG路径上获取点的Y坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！