我正在尝试进行如下图所示的旅程（时间轴）。
它总共有15个阶段，我无需滚动页面即可显示它。
我可以使它成一直线，但不能使它们在整条线上弯曲。
我该如何实现？
以下是我的html和css代码
.timeline{
margin-top: 100px;
/* width: 390px; */
}
.row{
display: flex;
margin: 0px 0;
background-image: url('https://image.ibb.co/kCcH1d/dot.png');
background-repeat-y: no-repeat;
width: 390px;
}
.circle{
height: 30px;
width: 30px;
background: red;
border-radius: 50%;
text-align: center;
margin-right: 50px;
margin-left: 50px;
margin-top: -15px;
display: flex;
align-items: center;
justify-content: center;
}
.row.right:after {
height: 70px;
background-image: url('https://image.ibb.co/eibc1d/dot2.png');
background-repeat-x: no-repeat;
content: "";
width: 2px;
}
.row.left:before {
height: 70px;
background-image: url('https://image.ibb.co/eibc1d/dot2.png');
background-repeat-x: no-repeat;
content: "";
width: 2px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="timeline">
<div class="row right">
<div class="circle"> A </div>
<div class="circle"> B </div>
<div class="circle"> C </div>
</div>
<div class="row left">
<div class="circle"> D </div>
<div class="circle"> E </div>
<div class="circle"> F </div>
</div>
<div class="row right">
<div class="circle"> G </div>
<div class="circle"> H </div>
<div class="circle"> I </div>
</div>
<div class="row left">
<div class="circle"> J </div>
<div class="circle"> K </div>
<div class="circle"> L </div>
</div>
<div class="row right">
<div class="circle"> M </div>
<div class="circle"> N </div>
<div class="circle"> 0 </div>
</div>
</div>
</body>
</html>最佳答案
这是一个非常基本的示例，说明如何使用SVG（我只是使用Adobe Experience Design进行绘制），圆圈中的父组包含一个onclick事件，该事件将索引位置顺序发送给JS函数，希望这会有所帮助
function eventthis(position,obj){
console.log('clicked in position ',position);
//do stuff
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 500">
<defs>
<style>
.cls-1 {
clip-path: url(#clip-Custom_Size_1);
}
.cls-2, .cls-5 {
fill: none;
}
.cls-2, .cls-3 {
stroke: #707070;
}
.cls-3, .cls-6 {
fill: #fff;
}
.cls-4 {
stroke: none;
}
</style>
<clipPath id="clip-Custom_Size_1">
<rect width="300" height="500"/>
</clipPath>
</defs>
<g id="Custom_Size_1" data-name="Custom Size – 1" class="cls-1">
<rect class="cls-6" width="300" height="500"/>
<path id="Path_1" stroke-dasharray="3" data-name="Path 1" class="cls-2" d="M24.621,20.759s227.3-30.868,227.44,35S57.809,52.051,52.528,108.6s181.931,3.044,188.138,66.8c-2.136,14.672,16.033,76.56-78.386,56.463S42.461,229.014,47.672,265.7s213.89-23.538,204.39,63.023c-5.839,15.735,10.235,57.524-139.437,35.4-71.377-4.844-77.94,71.9-77.94,71.9" transform="translate(11 17)"/>
<g id="Ellipse_1" data-name="Ellipse 1" class="cls-3" transform="translate(20 25)" onclick="eventthis(1,this)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_2" onclick="eventthis(2,this)" data-name="Ellipse 2" class="cls-3" transform="translate(248 51)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_3" onclick="eventthis(3)" data-name="Ellipse 3" class="cls-3" transform="translate(46 103)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_4" onclick="eventthis(4,this)" data-name="Ellipse 4" class="cls-3" transform="translate(232 162)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_5" onclick="eventthis(5,this)" data-name="Ellipse 5" class="cls-3" transform="translate(46 235)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_6" onclick="eventthis(6,this)" data-name="Ellipse 6" class="cls-3" transform="translate(232 300)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
<g id="Ellipse_7" onclick="eventthis(7,this)" data-name="Ellipse 7" class="cls-3" transform="translate(51 384)">
<circle class="cls-4" cx="15.5" cy="15.5" r="15.5"/>
<circle class="cls-5" cx="15.5" cy="15.5" r="15"/>
</g>
</g>
</svg>