I have created an intricate SVG file containing 35 different paths resembling train tracks. My next step is to break down these paths into 16 segments, allowing another SVG path (train) to smoothly traverse along them.
The ultimate goal is to grant users the ability to select and activate specific paths, making the segments clickable in a sequence of their choice.
In order to test the functionality, I need the train to move randomly along the tracks.
My initial attempt at segmenting the paths looked like this:
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")},
...
};
Unfortunately, this method did not yield the desired results. I am unsure why, as my previous experience involved manually assigning coordinates for segments on a PNG image, which worked successfully:
const segments = {
1: { x: 1534, y: 534 },
2: { x: 2278, y: 630 },
3: { x: 2488, y: 1179 },
...
};
Being relatively new to coding, I am struggling to find the right solution for my specific issue. The resources I've come across so far haven't been tailored to my problem.
I would greatly appreciate any guidance or assistance you can provide. Thank you in advance.