Html 旅程中的曲线（时间线）

我正在尝试做一个旅程（时间线），它看起来像下图。

它总共有15个阶段，我在不滚动页面的情况下显示它

我可以把它画成一条直线，但我不能把它们画成曲线

我怎样才能做到呢

下面是我的html和css代码

。时间线{
边缘顶部：100px；
/*宽度：390px*/
}
.行{
显示器：flex；
边际：0px0；
背景图像：url（'https://image.ibb.co/kCcH1d/dot.png');
背景重复y：无重复；
宽度：390px；
}
.圆圈{
高度：30px；
宽度：30px；
背景：红色；
边界半径：50%；
文本对齐：居中；
右边距：50px；
左边距：50像素；
利润上限：-15px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.行。右：之后{
高度：70像素；
背景图像：url（'https://image.ibb.co/eibc1d/dot2.png');
background-repeat-x：无重复；
内容：“；
宽度：2倍；
}
左：前{
高度：70像素；
背景图像：url（'https://image.ibb.co/eibc1d/dot2.png');
background-repeat-x：无重复；
内容：“；
宽度：2倍；
}

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
0

这是如何使用SVG实现这一点的一个非常基本的示例（我只是使用Adobe Experience Design绘制的），圆圈内的父组包含一个onclick事件，该事件将索引位置顺序发送给JS函数，希望这有帮助

功能事件此（位置，obj）{
console.log（'点击位置'，位置）；
//做事
}

.cls-1{
剪辑路径：url（#剪辑-自定义大小_1）；
}
.cls-2、.cls-5{
填充：无；
}
.cls-2、.cls-3{
行程：#707070；
}
.cls-3、.cls-6{
填充：#fff；
}
.cls-4{
中风：无；
}

您是否尝试过使用canvas元素绘制它？这应该是一个跨浏览器的解决方案吗？@MoritzJaeger，使用canvas元素？否。是的，它将在所有主要浏览器中可见。为此，您应该使用svg。这些阶段是可单击的。使用svg，我可能能够绘制形状，但是阶段呢？阶段使用svg圆圈。您可以将onclick事件分配给它们