不同的 SVG 路径是段的一部分

Question

我创建了一个包含 35 条不同路径（火车轨道）的 SVG 文件。 现在我想将路径/轨道分成 16 段，以便另一条 SVG 路径（火车）可以沿着它移动。

最终的目标是用户可以确定哪些路径应该被激活，即后面的段应该可以被用户按顺序点击。

为了测试它是否正常工作，火车应该沿着轨道随机移动。

目前我尝试将路径分配到这样的段中：

const segments = {
    1: { x: document.getElementById("track1"), y: document.getElementById("track2")},
    2: { x: document.getElementById("track3"), y: document.getElementById("track4")},
    3: { x: ocument.getElementById("track5"),  y: document.getElementById("track6")},
...
};

不幸的是，这不起作用。我不知道为什么，因为我认为我可以将路径分配到相应的段中。在 SVG 文件是一个正常绘制的 PNG 文件之前，其中段是通过它们的坐标手动分配的，它可以工作：

const segments = {
    1: { x: 1534, y: 534 },
    2: { x: 2278, y: 630 },
    3: { x: 2488, y: 1179 },
...
};

我是一般的编码新手，所以很遗憾我不知道要寻找什么。我找到的解决方案并不完全适合我的问题。

提前感谢您对我的帮助。

Answer 1

document.getElementById("track1") 只会返回一个路径元素。如果您需要路径起点的坐标，则需要执行以下操作：

1: { x: document.getElementById("track1").getPointAtLength(0).x,
     y: document.getElementById("track1").getPointAtLength(0).y }