jQuery and SVG working together

Simple sample on how to use creat SVG element with jQuery.

HTML

<svg width="100" height="100"></svg>

JavaScript

$("svg").append(document.createElementNS("http://www.w3.org/2000/svg", "circle")).find("circle").attr({
    cx: "50",
    cy: "50",
    r: "40",
    fill: "green"
});

// Variante sur le même thème
var circle = $(document.createElementNS("http://www.w3.org/2000/svg", "circle")).attr({
    cx: "50",
    cy: "50",
    r: "20",
    fill: "#FFF"
});

function start() {
    $(x).animate({
        'width': '0'
    }, {
        step: function (now, fx) {
            $(circle).attr('cx', $(this).width());
            console.info($(this).width());
        },
        duration: 2000,
        complete: stop
    });


}

function stop() {
    $(x).animate({
        'width': '100'
    }, {
        step: function (now, fx) {
            $(circle).attr('cx', $(this).width());
            console.info($(this).width());
        },
        duration: 2000,
        complete: start
    });
}

var x = document.createElement('div');
$(x).css({
    width: 100
});
$('svg').append(circle);
start();