I have the code that moves images in SVG with the mouse. When I move the image, as soon as it is released, I want your clone to appear in the position the first one started and that it is also possible to move it. I have an example here, with the clone code that does not work for me:
var newimage = document.getElementById('img').cloneNode(true);
Example: link
You can clone directly when you "grab" an element, in mousedown .
In this case all you need is a new line:
ddData.element.parentNode.appendChild(ddData.element.cloneNode(true));
Ps: I added one more check here because of errors I was having when the click was not in an image:
if (!ddData.element || ddData.element.tagName == 'svg') return ddData.element = null;
You almost got it right, it was just wrong to give appendChild, you are trying to give appendChild in the body, when append should append in svg root, try the following:
HTML :
<svg width="90%" height=500px id="svgRoot">
<image xlink:href=/favicon.png id="img" x=0 y=0 height=20 width=20 />
<svg>
Javascript :
function clone() {
var root = document.getElementById('svgRoot');
var newimage = document.getElementById('img').cloneNode(true);
newimage.setAttribute("x", ddData.initialX);
newimage.setAttribute("y", ddData.initialY);
newimage.style.position = 'absolute';
newimage.id = 'novoSVG';
root.appendChild(newimage);
}
@Edit: Functional JSFiddle: link