Angular中圆形SVG温度拖拽器stroke-dashoffset异常问题咨询

这个拖拽“加速”且按钮偏移越来越大的问题，核心是拖拽逻辑未正确处理stroke-dashoffset的负数值与路径长度的循环关系，具体原因拆解如下：

1. 负偏移的等效逻辑未被正确识别
   静态demo中stroke-dashoffset="-260"结合pathlength="270"，实际等效于正偏移10（SVG中负的dashoffset会绕路径循环，-260 + 270 = 10）。但你的Angular拖拽逻辑直接使用原始负偏移值参与计算，没有将其转换为路径长度范围内的等效正偏移，导致后续偏移增量计算基于错误基准值，不断累加后偏移量绝对值越来越大。

2. 拖拽偏移增量未做模运算约束
   拖拽过程中，鼠标位置转换为角度后，对应的偏移量计算没有基于pathlength=270做模运算限制。当偏移量超出路径长度范围（或出现负数）时，未将其拉回[0,270)的有效区间，导致每次拖拽都在错误的偏移值上叠加新增量，最终表现为按钮被“加速”推离正常路径范围。

3. dasharray与偏移的映射逻辑错位
   你用stroke-dasharray="0 270"模拟拖拽按钮（仅显示端点圆点），这种设置下偏移量的正负会影响圆点显示方向，但拖拽逻辑中的角度转偏移计算基于正方向，未匹配负偏移的循环特性，导致每次拖拽的偏移增量与实际期望的位置变化不匹配，进一步放大了偏移错误。

内容的提问来源于stack exchange，提问作者Ole