SVG：在曲线上找到点

Question

编辑：答案（感谢@musically_ut提供getPointAtLength，但似乎我必须自己做真正的工作。注意：“draw.circle”语法来自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 < 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库，但可以原生地完成此部分。

谢谢！

- graph

---

在这种情况下，路径代表一个数学函数，因此您可以通过代数方式计算函数上的点。 - sbking

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

好的，只需查看实际的SVG文件即可了解它是如何完成的！不过，必须承认，它的源代码很糟糕。 - Bergi

@Bergi，红点似乎是手动放置的，或者计算是在服务器端完成的（或者我被奇怪的SVG语法搞糊涂了）。Cuberto，我会研究Snap.svg；但这又是我的项目中的另一个库... - graph

Answer 1

SVGPathElement有一个函数getPointAtLength()。

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

- musically_ut

---

我认为他更想要一种getPointAtXCoordinate函数的形式...... - Bergi

请提供简单易懂的可运行示例。 - NVRM