小编Max*_*alo的帖子

我的目标是设计一个看起来像这样的弧形滑块

我有以下模板结构

<svg width="500" height="300">
  <path id="track" stroke="lightgrey" fill="transparent" stroke-width="20" d="
     M 50 50
     A 90 90 0 0 0 300 50
  "/>
  <path id="trackFill" fill="cyan" stroke-width="20" d="
     M 50 50
     A 90 90 0 0 0 [some dynamic value?] [some dynamic value?]
  "/>
  <circle id="knob" fill="lightblue"  cx="[dynamic, initial - 50]" cy="[dynamic, initial - 50]" r="25"/>
</svg>

knob- 用户应该拖动以更改值的控件

track- 幻灯片的完整弧线

trackFill- 旋钮之前的滑块路径部分

trackFill当沿着滑块曲线拖动旋钮时，是否可以覆盖滑块之前的部分？如果是这样，哪些 API 或 CSS 规则可以帮助我实现这样的结果？