SVG：在曲线上找到点

Question

编辑：答案（@musically_ut为getPointAtLength，但似乎我必须自己做真正的工作。注意：“draw.circle”-syntax来自svg.js）

1. 使用.attr({id: "mypath"});
将您自己的ID添加到路径中

2. 找到它：var a = document.getElementById("IdOfSvgCurve");

3. 在曲线上画几个圆圈。坐标必须相对于起点。

   var pt_start = a.getPointAtLength（0）;
              for（var i = 0; i＆lt; len; i ++）{                var pt = 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"/>

http://jsfiddle.net/wVC7j/

如何在该曲线上放置点？像这样：

https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Interpolation_example_polynomial.svg/220px-Interpolation_example_polynomial.svg.png

它可以使用像pathLength这样的东西，使用“坐标系”，也可以通过曲线上的实际跟踪点并使用它们的坐标添加它们。

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

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

谢谢！

Answer 1

SVGPathElement有一个函数getPointAtLength()。

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