Sometimes, jQuery is weird with SVG

by JeremiePat

JavaScript

var doc, node = [], parser = new DOMParser(),
    svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" /></svg>',
    circle = '<circle cx="50" cy="50" r="30" fill="red" />',
    circleNS = '<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="20" fill="green" />';

// With jQuery... why there is no green circle?

$(document.body)
    .append(svg)
    .find("svg")
    .append(circle)
    .append(circleNS);


// With regular DOM... verbose but works as expected.

doc = parser.parseFromString(svg, "text/xml");
node.push(parser.parseFromString(circle, "text/xml"));
node.push(parser.parseFromString(circleNS, "text/xml"));

document.body.appendChild(doc.firstChild);
document.getElementsByTagName('svg')[1].appendChild(node[0].firstChild);
document.getElementsByTagName('svg')[1].appendChild(node[1].firstChild);