JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <div id="proxy"></div>
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" id="frame">
            <defs id="defs3077">
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
                </linearGradient>
                <clipPath clipPathUnits="userSpaceOnUse" id="clipPath4595">
                    <path style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.71428573;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" d="m 36.154292,354.75521 c 5.175559,-20.64858 10.435116,-61.81609 12.750224,-99.79832 3.005725,-49.31265 1.858624,-98.56506 -3.551763,-152.5 -2.595622,-25.875192 -8.237689,-58.232972 -11.776958,-67.541953 -0.679638,-1.787583 -0.618679,-1.885449 0.893268,-1.434085 22.53118,6.726273 55.635756,11.46818 105.908397,15.170344 24.50499,1.80459 96.14892,1.807568 120.35714,0.005 38.83186,-2.89145 75.44247,-7.780196 94.54071,-12.624357 6.20304,-1.573366 11.38171,-2.860666 11.50816,-2.860666 0.12645,0 -0.40171,2.008929 -1.17367,4.464286 -9.64704,30.683787 -17.32371,115.933581 -16.03196,178.035711 1.10623,53.18358 6.81473,108.8585 14.24128,138.89509 1.65583,6.69699 2.84456,12.17327 2.64162,12.16951 -0.20295,-0.004 -5.51185,-1.30686 -11.79757,-2.89579 -18.82,-4.7574 -56.28015,-9.71517 -95,-12.57304 -24.60545,-1.8161 -92.39891,-1.81126 -117.85714,0.008 -49.526052,3.53998 -83.655417,8.36083 -107.198129,15.14197 -1.417709,0.40835 -1.348786,-0.11144 1.546391,-11.66212 l 0,-1e-5 z" id="path4597"></path>
                </clipPath>
            </defs>
            <g style="display:inline">
                <rect y="20" x="20" id="background" height="600" width="800"...

CSS

#container {
    position:relative;
    display:inline-block;
}
#proxy {
    cursor:pointer;
    width:340px;
    height:340px;
    position:absolute;
    top:30px;
    left:30px;
}

JavaScript

// I make the invisible div draggable:
$('#proxy').draggable()
// Let's store its position:
.data('position', { top : 30,
                   left : 30 })
// So it doesn't create scrollbars:
.on('dragstart', function(e)
    {
        $('#proxy').css('display','none');
    })
// So it moves the target element:
.on('drag', function(e)
    {
        t = $('#background');
        prox = $('#proxy');
        t.attr('x', t.attr('x')*1
                   + prox.css('left').slice(0,-2)*1
                   - prox.data('position').left)
            .attr('y', t.attr('y')*1
                      + prox.css('top').slice(0,-2)*1
                      - prox.data('position').top);
        prox.data('position',{top : prox.css('top').slice(0,-2)*1,
                              left: prox.css('left').slice(0,-2)*1}
                  );
    })
// Now some tidying up:
.on('dragstop', function(e) 
    {
        $('#proxy').data('position',{top:30,left:30})
            .css('display','inline')
            .css('top',30).css('left',30);
    });