如何使用SVG实现复杂动态UI效果，例如时间轴？

<svg class="test" width="500" height="300">
  <!-- 渐变色 -->
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#5897ee;"></stop>
      <stop offset="100%" style="stop-color:#eda378;"></stop>
    </linearGradient>
  </defs>

  <!-- 轨道 -->
  <path id="path" d="M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 20 120" stroke="#eeeeee" stroke-width="23" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>

  <!-- 进度 -->
  <path d="M 20 20 L 430 20 C 480 20 480 120 430 120 L 430 120 L 200 120" stroke="url(#gradient)" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></path>

  <!-- 圈 -->
  <circle cx="20" cy="170" r="10" fill="#2274fa" />
  <circle cx="50" cy="170" r="10" fill="#e78d48" />

  <!-- 文本 -->
  <text x="140" y="160">
    <tspan x="140" y="160" fill="red">不支持自动换行</tspan>
    <tspan x="140" y="180">这是第二行</tspan>
  </text>
</svg>