前端html使用svg实现弧线和圆点样式

        <!-- 线条和圈 -->
        <svg width="100%" height="400" viewBox="0 0 1400 400">
          <!-- 线 -->
          <path d="M110 350 C 400 360, 800 400, 1100 50" stroke="#ffffff50" stroke-width="3" fill="none" />

          <!-- 圈1 -->
          <circle cx="110" cy="350" r="7" stroke="#ffffff50" stroke-width="8" fill="none" />
          <circle cx="110" cy="350" r="5" fill="#C4302C" />
          <text x="80" y="320" font-size="20" fill="white">2021年</text>

          <!-- 圈2 -->
          <circle cx="350" cy="357" r="7" stroke="#ffffff50" stroke-width="8" fill="none" />
          <circle cx="350" cy="357" r="5" fill="#C4302C" />
          <text x="320" y="330" font-size="20" fill="white">2022年</text>

          <!-- 圈3 -->
          <circle cx="600" cy="335" r="7" stroke="#ffffff50" stroke-width="8" fill="none" />
          <circle cx="600" cy="335" r="5" fill="#C4302C" />
          <text x="570" y="305" font-size="20" fill="white">2023年</text>

          <!-- 圈4 -->
          <circle cx="890" cy="230" r="7" stroke="#ffffff50" stroke-width="8" fill="none" />
          <circle cx="890" cy="230" r="5" fill="#C4302C" />
          <text x="860" y="200" font-size="20" fill="white">2024年</text>

          <!-- 圈5 -->
          <circle cx="1100" cy="50" r="7" stroke="#ffffff50" stroke-width="8" fill="none" />
          <circle cx="1100" cy="50" r="5" fill="#C4302C" />
          <text x="1070" y="20" font-size="20" fill="white">2025年</text>
        </svg>

path 标签是线条标签

M100 350 // 起点 (100， 350)  第一个值是x轴，第二个值是y轴

C 400 360, 800 400, 1100 50 // 控制点1(400 360)，控制点2(800 400)，终点(1100 50) 

circle 标签是圆标签

 cx="350" cy="357" r="7" stroke="#ffffff50" stroke-width="8" fill="none"

x轴线350 y轴线357 半径7 外圈颜色 外圈宽度8 中间颜色

文字

<text x="320" y="330" font-size="20" fill="white">2025年</text> 

viewBox="min-x min-y width height"

• min-x 和 min-y：决定了视窗左上角在 SVG 坐标系中的起始点。
• width 和 height：定义了视窗的宽度和高度，即你要显示的 SVG 内容区域的大小。