使用cloneNode函数复制节点元素--svg拖拽复制

function selectElement(event){
            // if(event.button==0){
                console.log("select element");
                // var id=event.currentTarget.getAttribute('xlink:href');
                // console.log('id:'+id);
                // var useElem=document.createElementNS("http://www.w3.org/2000/svg","use");
                // useElem.setAttribute('x','0');
                // useElem.setAttribute('y','0');
                // useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', id);
                var copiedNode = event.currentTarget.cloneNode(true);
                copiedNode.setAttribute('transform','translate(0,0)');
                var blockSurface=document.getElementById("blockDragSurface");
                blockSurface.appendChild(copiedNode);
                blockSurface.removeAttribute("width");
                blockSurface.removeAttribute("height");
                blockSurface.setAttribute("width",event.currentTarget.getBoundingClientRect().width);
                blockSurface.setAttribute("height",event.currentTarget.getBoundingClientRect().height);
                // blockSurface.appendChild(useElem);
                var prog=document.getElementById("prog");
                var posX=event.target.getBoundingClientRect().left-prog.getBoundingClientRect().left;
                var posY=event.target.getBoundingClientRect().top-prog.getBoundingClientRect().top;
                mouseToDragsvgLeft=event.clientX-event.target.getBoundingClientRect().left;
                mouseToDragsvgTop=event.clientY-event.target.getBoundingClientRect().top;

                var strTrans="translate(" + posX +"," + posY +")";
                console.log("strTrans: "+ strTrans);
                // blockSurface.setAttribute('transform','translate(600,100)');
                blockSurface.setAttribute('transform',strTrans);
                blockSurface.style.display="block";
                leftBtnPressed=true;
                dragSvg=true;
            // }
        }

需求

我想实现鼠标拖拽一个<g>元素的效果，在源<g>元素上绑定了“onmousedown”,因为不知道怎么复制元素，一开始我在响应函数中企图使用<use>元素复用源元素。

导致问题

我如果要操纵生成的g元素（移动，定位等）还需要将<g>元素从<use>中提取出来，就很麻烦。

寻求解决的过程

我考虑过使用createElementNS函数，但是还要调用setAttribute，并且有时候还不知道元素带了哪些属性。

解决方案

绕了个大弯弯，js原本就提供了元素复制功能cloneNode（deep=false）：

• cloneNode（）：默认调用浅拷贝，不会递归复制后代元素
• cloneNode（true）：deep置为true，This is what I need！