请帮我解决我的想法。我想重新创建交互式图形，例如“谷歌汇率”。圆始终应遵循路径。

<div id='svg_wrapper'>
  <svg viewBox='0 0 1920 1080' preserveAspectRatio='xMinYMin meet' style='width:100%;height:100%;background-color:#505050>
    <path d='m 0,100 l 500,300 400,-350 800,350' style='fill:none;stroke:#a5e14bff;stroke-width:8px;'/>
    <circle r='18' cx='0' cy='100' style='fill:none;stroke:white;stroke-width:6px;'/>
  </svg>
</div>

因此，我使用了鼠标的“ x”坐标，并尝试从getPointAtLength API中获取“ y”。是的，这是错误的，但是我还没有找到其他解决方案。我正在考虑通过矢量长度操作（用于相对坐标）进行某种长度转换。但是，也许您可​​以给我另一种方式……这看起来像是简单的数学运算“通过x查找y”

var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
function cursorPoint(evt){
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

svg.addEventListener('mousemove',function(evt){
  let loc = cursorPoint(evt);
  let style = document.querySelector('circle').style;
  if (loc.x>=0&&loc.x<=1700) {
    let curve = document.querySelector('path').getPointAtLength(loc.x);
    console.log(curve.y.round(0));
    style.cx = loc.x;
    style.cy = curve.y.round(0);
  }
},false);

Number.prototype.round = function(places) {
    return +(Math.round(this + "e+" + places)  + "e-" + places);
}

https://codepen.io/flyby/pen/WNNmeOE-codepend工作流程