Drawing SVG using Javascript

Question

I have the following code snippet:

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 width and height.

The <svg> and <circle> elements are added to the <div> , but they do not have a visible size. What am I missing?

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

Answer 1

It is for this reason that svillamayor refers to. You cannot make svg directly from jquery, so you will add the actual element and wrap it in jquery to change it.

I made a violin to show how you do it by wrapping things:

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

The real trick:

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