使用SVG在圆环内的鼠标单击上绘制可拖动线-ReactJS

Question

在我的ReactJS app中，我试图在某些点上绘制一个圆圈，当用户在该圆圈内单击时，我想添加一个可拖动十字线< / strong>，并在该圆圈内插入xy线。

我能够画圆并单击鼠标得到x-y点；

function clicked(evt){
      var e = evt.target;
      var dim = e.getBoundingClientRect();
      var x = evt.clientX - dim.left;
      var y = evt.clientY - dim.top;
      alert("x: "+x+" y:"+y);
  }

<img src="https://geology.com/world/united-states-map-with-state-names.gif" />
<svg style='position:absolute; top: 95px; left: 400px;' xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="transparent" onClick="clicked(evt)"/>
</svg>

但是现在停留在如何在该圆内添加带有x-y线的可拖动十字准线的问题上。.

有人可以推荐我一些不错的文章或起点吗？因为我只能拖动直线或矩形/圆形等形状。如何从给定点绘制直线到圆的x-y坐标？并允许用户在该圆圈内四处移动？