<svg id="svg" width="100%" height="100%">
<g id="center">
<rect id="rect" x="0" y="0" width="1000000" height="1000000" fill="gold" onmousedown="onDragging(event)"/>
</g>
</svg>

const onDragging = (e) =>{
    const center = document.getElementById("center");
    const rectLayers = center.getBoundingClientRect();
    const shiftLayers = {
        x:(e.clientX-rectLayers.left),
        y:(e.clientY-rectLayers.top)
    };
    const Start = (e) =>{ 
      const svg = document.getElementById("svg");
      const pt = svg.createSVGPoint();
      pt.x = (e.clientX-shiftLayers.x);
      pt.y = (e.clientY-shiftLayers.y);
      const svgPos = pt.matrixTransform((svg).getScreenCTM().inverse());
      const layers = {
        x:svgPos.x,
        y:svgPos.y,
      };
      center.setAttribute('transform',`translate(${Math.round(layers.x)},${Math.round(layers.y)})`);
    };
    const End = (e) => {
       document.removeEventListener('mousemove',Start);
       document.removeEventListener('mouseup',End);
    };
    document.addEventListener('mousemove',Start);
    document.addEventListener('mouseup',End);
}