Add SVG object inside a dynamic div

Asked

Viewed 311 times

1

I have an SVG element created from a clone. I wanted to insert this clone into a new div. I used this code.

function clone(){
        var newrect = document.getElementById('rect').cloneNode(true);
        document.getElementById("svg").appendChild(newrect);

        newrect.setAttribute("x", 100);
        newrect.setAttribute("y", 100);
        newrect.style.position = 'absolute';    


        var div = document.createElement('div');
        document.body.appendChild(div);
        div.id = 'div1';


        var div1 = document.getElementById("div1");
        div1.insertBefore(newrect, div1.firstChild);
}
javascript svg

  • Do you have a problem with the code? What’s the problem? It’s the continuation of the other question?

  • I think it creates the div, but my clone object disappears.

  • wants to create a new div with a svg in? if you can’t explain better pf...

  • Yes that’s right. I want the object that was copied to be in a new div, created ('div1').

  • Is this what you’re looking for? http://jsfiddle.net/dgkcaf9q/

  • Yes it is, but I have a problem with the position. Because I have a div before the svg object. And it works if you take the position from the div. as in this case: http://jsfiddle.net/dgkcaf9q/4/

  • The problem is they’re on top of each other. If float already works: http://jsfiddle.net/dgkcaf9q/5/ If you explain in detail what you want to do you will get more help than if you ask in examples too specific...

  • Yes, what I want to do is move a svg object with the mousse, and when you drop create the clone in the position where the first one started. The problem is that the object does not go in the right position.

  • Can you put a jsFiddle with the full code you already have? Do you really want to do it with a svg or can it be another element?

  • yes, it has to be a svg http://jsfiddle.net/uLgkb8nr/

  • Would it be something like this then? http://jsfiddle.net/uLgkb8nr/1/

  • that’s right, thank you. but now the mousse is not in the middle of the object.

Show 7 more comments

1 answer

1


I suggest then change your clone function code to:

function clone() {
    var newrect = document.getElementById('svg').cloneNode(true);
    newrect.setAttribute("x", 100);
    newrect.setAttribute("y", 100);
    newrect.style.position = 'absolute';
    newrect.id = 'novoSVG';

    var div = document.createElement('div');
    div.style.height = '100px';
    div.style.width = '50px';
    addEvent(div, 'mousedown', function(e){ start_drag(div, e)});
    div.appendChild(newrect);
    document.body.appendChild(div);
}

Example: http://jsfiddle.net/m5d52oah/

In the background, it is seen that the previous div is removed from the initial position via drag and once it gives position: Absolute; to the new div, you do not need to worry about the position in the DOM. I also added a call to start_drag() to add an Event Handler to the new div.

Browser other questions tagged javascript svg

You are not signed in. Login or sign up in order to post.