Creé un archivo SVG que consta de 35 caminos diferentes (vías de tren). Ahora quiero dividir las rutas/pistas en 16 segmentos para que otra ruta SVG (tren) pueda moverse a lo largo de ella.

El objetivo final es que el usuario pueda determinar qué rutas deben activarse, es decir, el usuario debe poder hacer clic en los segmentos posteriores en secuencia.

Para probar si funciona, el tren debe moverse aleatoriamente a lo largo de las vías.

Actualmente traté de asignar las rutas en segmentos como este:

 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")}, ... };

Esto lamentablemente no está funcionando. No sé por qué, ya que pensé que podría asignar las rutas a los segmentos correspondientes. Antes, el archivo SVG era un archivo PNG normalmente dibujado en el que los segmentos se asignaban manualmente a través de sus coordenadas de esta manera y funcionaba:

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

Soy nuevo en la codificación en general, así que lamentablemente no sé qué buscar. Las soluciones que encontré no eran exactamente adecuadas para mi problema.

Gracias de antemano por ayudarme.