如何根据鼠标移动在SVG路径中绘制圆弧？

Question

使用鼠标移动SVG绘制圆弧时如何获取SVG路径原点坐标

我已经使用<path>在SVG中创建了一条弧。但是我需要随着鼠标移动绘制和弧形。为此，我使用以下代码计算了角度

<svg viewBox="-100 -100 500 500" xmlns="http://www.w3.org/2000/svg" id="svg1" class="svgStyle" style="position: absolute;">
              <path id="arc1" />
              <defs>
                <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stop-color="#0099ee"/>
                  <stop offset="100%" stop-color="#dc3545"/>
                </linearGradient>
              </defs> 
            </svg>   

var deltaX = e.changedTouches[0]['clientX'] - 480;var deltaY = e.changedTouches[0]['clientY'] - 320;var rad = Math.atan2(deltaY, deltaX);var deg = (rad * 180) / Math.PI;

但这无法正常工作。我希望根据鼠标的移动来填充圆弧的笔触。 如果将鼠标移到右侧，将鼠标放在笔划上，则应填充笔划。如果将鼠标左移enter code here，则应填充笔划。