svg mouse event : drag and drop

<svg width="100%" height="100%" onload="startUp(evt)">
<style>
ellipse#herb,ellipse#rosemary,ellipse#face {fill:none;stroke:blue;stroke-width:15;}
</style>

<script>
//global variables
var svgDocument=null;
var svg=null;
var things=new Array("rose","orchid","herb","rosemary","face");
var lastX=new Array();
var lastY=new Array();

//functions

function startUp(evt){

svg=evt.target;
svgDocument=svg.ownerDocument;
console.log(svgDocument);


for (i in things){
lastX[things[i]]=0;
lastY[things[i]]=0;
svgDocument.getElementById(things[i]).setAttribute('onmousedown',"lock(evt)");
}
}


function lock(evt){
var id=evt.currentTarget.id;
console.log(id);
x=evt.clientX;
y=evt.clientY
offsetX=x-lastX[id];
offsetY=y-lastY[id];
svg.setAttribute('onmousemove',`moving(evt,"${id}",${offsetX},${offsetY})`);
svg.setAttribute('onmouseup','svg.setAttribute("onmousemove","null")');

}

function moving(e,id,x,y){
o=svgDocument.getElementById(id);console.log(id);
o.setAttribute('transform',"translate("+(e.clientX-x)+","+(e.clientY-y)+")");
lastX[id]=e.clientX-x;
lastY[id]=e.clientY-y;
}

</script>

<rect id="rose" x="100" y="100" width="100" height="100" fill="red" stroke="blue"/>
<rect id="orchid" x="200" y="100" width="100" height="100" fill="red" stroke="blue"/>
<ellipse id="herb" cx="250" cy="50" rx="50" ry="100" transform="rotate(90)" 
style="transform-box:fill-box;transform-origin:50% 50%;"/>
<ellipse id="rosemary" cx="150" cy="50" rx="50" ry="100" transform="rotate(90)" 
style="transform-box:fill-box;transform-origin:50% 50%;"/>
<ellipse id="face" cx="150" cy="50" rx="150" ry="200" transform="rotate(90)" 
style="transform-box:fill-box;transform-origin:50% 50%;"/>
</svg>