Javascript 如何在创建SVG元素后移动它？

我创建了一个小型SVG编辑器，现在出现了以下问题。创建图元后如何移动它

我想通过左键单击选择元素，然后通过onMouseDown事件来移动元素

以下是我的html代码：

功能检查（obj）{
var str=新数组（）；
var元素=null；
对于（obj中的元素）{str[str.length]=element；}
str.sort（）；
警报（obj+“：”+str.join（“”））；
}
var bMouseDraging=false；
var nmousefoffsetx=0；
var nmousefoffsety=0；
var background=document.getElementById（'background'）；
函数mouseDown（evt）{
b=真；
var ball=document.getElementById（'ball'）；
如果（球）{
var p=document.documentElement.createSVGPoint（）；
p、 x=evt.clientX；
p、 y=evt.clientY；
var m=ball.getScreenCTM（）；
p=p.matrixTransform（m.reverse（））；
nMouseOffsetX=p.x-parseInt（ball.getAttribute（'cx'）；
nMouseOffsetY=p.y-parseInt（ball.getAttribute（'cy'）；
}
}
函数mouseUp（evt）{
b=false；
}
函数mouseMove（evt）{
var p=document.documentElement.createSVGPoint（）；
p、 x=evt.clientX；
p、 y=evt.clientY；
var bClient=true；
如果（b拖动）{
var ball=document.getElementById（'ball'）；
如果（球）{
var m=ball.getScreenCTM（）；
p=p.matrixTransform（m.reverse（））；
setAttribute（'cx'，p.x-nMouseOffsetX）；
setAttribute（'cy'，p.y-nMouseOffsetY）；
b客户=假；
}
}
displayCoords（p.x，p.y，（b客户端？（客户端）：（svg用户））；
}
功能显示坐标（x、y、额外）{
var xNode=document.getElementById（'xpos'）；
var yNode=document.getElementById（'ypos'）；
if（xNode&&yNode）{
xNode.firstChild.nodeValue=parseInt（x）+额外；
yNode.firstChild.nodeValue=parseInt（y）+额外；
}
}
函数displayRawText（文本）{
var textNode=document.getElementById（'raw'）；
如果（文本节点）{
textNode.firstChild.nodeValue=text；
}
}
函数init（）{
var ball=document.getElementById（'ball'）；
如果（球）{
ball.addEventListener（“mousedown”，mousedown，false）；
ball.addEventListener（“mouseup”，mouseup，false）；
ball.addEventListener（“mousemove”，mousemove，false）；
}
displayRawText（“拖动球”）；
}

SVG编辑器
SVG编辑器
在这里键入文本。。。
$（文档）.ready（svgEditor）；

问题到底出在哪里？我想举一个例子，说明如何移动刚创建的对象。我搜索并只找到如何移动静态SVG元素的示例。在元素上粘贴一个变换。我想用鼠标左键单击它，然后将它拖到我想要的地方。