Drawing SVG using Javascript

Question

I have the following snippet of code:

draw: function drawFn ($dial) {

    var width = $dial.width(),
        height = $dial.height(),
        $svg = $('<svg />').attr({
            "width": width,
            "height": height
        }),
        circle = $('<circle />').attr({
            "cx": 0,
            "cy": 0,
            "r": width / 2,
            "fill": "red"
        });

    $svg.append(circle);
    $dial.append($svg);
}

$dial is a jQuery wrapped <div> element with a width and height.

The <svg> and <circle> elements are both appended to the <div> but they have no visible size. What am I missing?

Fiddle here: http://jsfiddle.net/alexcoady/pLvAw/2/

this might be the reason http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element — svillamayor, Jul 26 '13 at 14:16

score 1 · Answer 1 · answered Jul 26 '13 at 15:36

It is for the reason svillamayor links to. You can't make svg straight from jquery, so you append the actual element in and wrap that in jquery to modify it.

I made a fiddle to show how you'd kinda do it by wrapping things:

http://jsfiddle.net/vEEZT/4/

The real trick is:

var $circle = $(document.createElementNS(NS, "circle"));

Drawing SVG using Javascript

1 Answers1