触摸时会出现SVG转换抖动，而不是鼠标

如何解决触摸时会出现SVG转换抖动，而不是鼠标

我正在创建一个使用svg以及CSS转换和matrix3d的React应用。 在应用程序中，我能够拖动对象的角以进行变形/扭曲。这在鼠标上很好用，但是一旦我使用evt.touches[0].clientX ，它就会在拖动过程中开始在看似随机的坐标之间跳跃。我保持触摸的时间越长，拐角就越接近触摸点。

示例： https://confident-shirley-bf53ab.netlify.app/ 按下相机，上传随机图像，然后单击一扇门。

这是主要功能：

const handletouchMove = (evt) => {  
    if (evt.target.localName === 'circle') {
      const offset = evt.target.getBoundingClientRect();
      const x = evt.touches[0].clientX - offset.left;
      const y = evt.touches[0].clientY - offset.top;
      if (mouseState.targetCircle >= 0) {
        if (mouseState === 4) {
          console.log('Moving door');
        } else {
          setCorners({
            ...corners,[mouseState.targetCircle]: {x,y}  //todo touch
          });
          const doorCorners = [
            [0,0],[doorWidth,doorHeight],[0,doorHeight]
          ]
    
          const circleCorners = Object.values(corners)
            .map(({x,y}) => [x,y]);
          setTransformationMatrix(
            getMatrix(doorCorners,circleCorners)
          );
        }
      }
      
    }  
  }

这是可拖动的圈子之一：

<circle
    className="handle"
    onMouseDown={() => handleCirleChoice(0)}
    onTouchStart={() => handleCirleChoice(0)}
    transform={`translate(${corners[0].x},${corners[0].y})`} 
    r="7"
/>