Move SVG

HTML

<svg id='mysvg' height="800" width="800">
    <path id='mypath' fill="#4444ff" stroke="#000000" 
    d="M100,300L400,300L100,0Z" transform=""></path>
    
    <path id='mypath' fill="#4444ff" stroke="#000000" 
    d="M100,300L400,300L100,0Z" transform="translate(-22, 23)"></path>
</svg>

JavaScript

el=document.getElementById("mypath");
el1=document.getElementById("mypath1");
sv=document.getElementById("mysvg");
flag=false; //to check if the mouse is currently down?

sv.onmousedown=function(e){
    flag=true;
    x1=e.clientX;
    y1=e.clientY;
    var t=el.getAttribute('transform');
    if(t){
      var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(t);
      var firstX = parts[1], firstY = parts[2];
      x1=x1-firstX*1;
      y1=y1-firstY*1;
    }
    /* x1 and y1 now contain the previous position*/
};
sv.onmousemove=function(e){
    if(flag){
        x=e.clientX;
        y=e.clientY;
        t="translate("+(x-x1)+","+(y-y1)+")"
        el.setAttribute('transform',t);
    }
};
sv.onmouseup=function(){flag=false};