使用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！