JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg" width="800" height="800" style="border: 1px dashed black;"
	onmousemove="move(evt)" onmouseup="endMove(evt)" onmouseout="endMove(evt)">

	<rect id="r" x="100" y="100" height="150" width="150" 
 onmousedown="mouseDown(evt)"/>
		
</svg>

JavaScript

var click=false; // flag to indicate when shape has been clicked
var clickX, clickY; // stores cursor location upon first click
var moveX=0, moveY=0; // keeps track of overall transformation
var lastMoveX=0, lastMoveY=0; // stores previous transformation (move)
	
	
	function mouseDown(evt){
		evt.preventDefault();
		click=true;
		clickX = evt.clientX; 
		clickY = evt.clientY;
    }

    function move(evt){
	evt.preventDefault();
	if(click){
	    moveX = lastMoveX + ( evt.clientX - clickX );
	    moveY = lastMoveY + ( evt.clientY - clickY );
		evt.target.setAttribute("transform", "translate(" + moveX + "," + moveY + ")");
	  }
    }

    function endMove(evt){
		click=false;
		lastMoveX = moveX;
		lastMoveY = moveY;
    }