SVG：查找曲线上的点

编辑：答案（对于getPointAtLength来说，@musically_ut得分，但似乎我必须自己做真正的工作）注意：“draw.circle”-syntax来自svg.js ）SVG：查找曲线上的点

添加你自己的ID的路径与.attr({id: "mypath"});
找到它：var a = document.getElementById("IdOfSvgCurve");
绘制曲线上的几个圈子。坐标必须与起点相关。

var pt_start = a.getPointAtLength（0）;对于（var i = 0; i < len; i ++）{
var var = a.getPointAtLength（i * 10）; var c = draw.circle（7） .fill（{color：“green”}） .move（pt.x - pt_start.x，pt.y - pt_start.y）; }

原题：

说我有一个SVG曲线，可能是一个贝塞尔或椭圆

<path id="SvgjsPath1044" d="M 125,75 a100,50 0 0,0 100,50"/>

我怎样才能把点右上曲线？就像这样：

这可能是使用类似的路径长度，使用一个“坐标系”，也可能是通过实际calculting是曲线上的点，并使用其坐标添加。

这主要是为了说明，所以我不一定需要一个通用的解决方案。

我正在使用svg.js库，但可以“本地”执行此部分。

谢谢！

2013-12-12 graph

在这种情况下，路径代表一个数学函数，所以您可以用代数方法计算函数上的点。 – sbking

Snap.svg也有一个'intersection'方法，它可以找到两个路径的交集。您可以创建临时垂直线路径，计算交点，在这些交点处添加点，并删除垂直线。 – sbking

那么，看看[实际的SVG文件]（https://upload.wikimedia.org/wikipedia/commons/4/41/Interpolation_example_polynomial.svg），看看它是如何完成的！诚然，它的来源是可怕的。 – Bergi

SVGPathElement有一个功能getPointAtLength()。

您可以使用此功能查找路径上的点，然后将circle元素放置在这些位置。

2013-12-12 22:28:15

我认为他宁愿想要某种'getPointAtXCoordinate'函数...... – Bergi

回答