How to add raphaeljs object in <div> tag

Question

$(document).ready(function(){                           
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
            $("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({
                fill : "blue",
                stroke : "black",
                strokeWidth : 0,
                r : 5
        }));
    });
});

i have tried this its add Raphael object in but it wont display on screen

Amrita

I highly doubt that new Raphael returns a DOM node, jQuery object or HTML string. – Pinkster

yes we can convert raphael object in to DOM object. see if i saw it in firebug it look like as below <svg height="600" version="1.1" width="900" xmlns="w3.org/2000/svg" style="overflow: hidden; position: relative;"> <div id="id1" height="50px" width="50px"> <rect x="30" y="50" width="80" height="100" r="0" rx="5" ry="5" fill="#0000ff" stroke="#000000" style=""> </div> – Amrita

Answer 1

Raphael renders into the container that you give it as the first argument. The return value is a Raphael paper object which you use for rendering. In short, just cut away $("#id1").append and it shows up.

$(document).ready(function(){                           
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
        var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600);
        paper.rect(30, 50, 80, 100).attr({
            fill : "blue",
            stroke : "black",
            strokeWidth : 0,
            r : 5
        });
    });
});

---

Further more, since you're using jQuery anyway, you might want to replace document.getElementById('canvasdiv') with $('#canvasdiv').get(0) for consistency.

Mizzenmast

Hi @HarshalChauhari, can you please accept this answer by clicking the check sign to the left? – Bulky

Answer 2

1. new keyword is not needed

var paper = Raphael(document.querySelector(target_css_selection_str), svg_width_int, svg_height_int);

2. Since you ask about what it returns. It returns a Paper object, which holds a reference to the new SVG element that it just built, via a property it calls "canvas".

...you should approve @Supr as the right answer btw, I am just adding a 2 cents.

Flasket