Javascript et jQuery : comment créer un svg dynamiquement
Saviez vous qu’il était impossible de créer un élément svg dynamiquement comme ceci :
var $('<svg />');
?
Moi non. Après avoir cherché pendant pas mal de temps j’ai enfin réussi à faire un code qui génère un svg et ça fonctionne :
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
div_svg = $('#mondiv');
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute('viewBox', '0 0 100 100');
mySvg.setAttribute('preserveAspectRatio', 'xMinYMin');
div_svg[0].appendChild(mySvg); /* (!) [0] = élément DOM "pur" */
var c = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
c.setAttribute('points', '0,45 25,1 75,1 99,45 75,90 25,90');
c.setAttribute('style', 'fill:blue;stroke:red;stroke-width:1');
$(mySvg).append(c);
Et voilà vous avez enfin un exemple qui fonctionne !