前端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 内容区域的大小。