gradient SVG & JS

Bonjour,

me revoilà pour un problème de svg et js et plus encore !

je m'explique;

j'ai créé un histogramme en svg généré a partir d'un tableau de valeur qui est variable en taille et en valeur.
jusque là tout va bien !

je souhaite mettre un petit effet de dégradé sur mes barres. je crée donc un linearGradient puis 2 stop dedans sans stop-color comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var linearGradient = document.createElementNS(svgns, 'linearGradient'); linearGradient.setAttribute('x1', '0'); linearGradient.setAttribute('y1', '0'); linearGradient.setAttribute('x2', '100%'); linearGradient.setAttribute('y2', '100%');   var stop0 = document.createElementNS(svgns, 'stop'); stop0.setAttribute('offset', '5%');   var stop1 = document.createElementNS(svgns, 'stop'); stop1.setAttribute('offset', '95%');   linearGradient.appendChild(stop0); linearGradient.appendChild(stop1); defs.appendChild(linearGradient);

---

ceci est créée dans la fonction loadChart de la même manière que ici

puis dans la fonction loadHisto de la même manière je récupère le linearGradient et je modifie les attributs des stops pour y mettre les couleurs que je veux puis j'ajoute le tout dans une balise g contenant mes polygons qui recevront ce gradient.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// hors boucle var template_gradient = document.getElementById('defs').getElementsByTagNameNS(svgns, 'linearGradient'); console.log(template_gradient);   //dans la boucle var g2 = document.createElementNS(svgns, 'g'); var gradient = template_gradient.item(0).cloneNode(true); gradient.setAttribute('id', 'grad_'+i); var stops = gradient.getElementsByTagNameNS(svgns, 'stop'); stops.item(0).setAttribute('stop-color', colors[i]); stops.item(1).setAttribute('stop-color', 'white'); g2.appendChild(gradient);   var points0 = (startX) + ',' + y + ' ' + (startX + taille) + ',' + y + ' ' + (startX + taille + 20) + ',' + (y - 20) + ' ' + (startX + 20) + ',' + (y - 20); var polygon0 = document.createElementNS(svgns, 'polygon'); polygon0.setAttribute('points', points0); polygon0.setAttribute('fill', 'url(#grad_'+i+')'); polygon0.setAttribute('stroke', 'black'); polygon0.setAttribute('id', 'poly_0_'+i); g2.appendChild(polygon0);

---

et alors à mon grand désespoir cela fonctionne ... sous firefox !
hors il est primordial que cela fonctionne aussi sous chrome ! et manifestement cela ne fonctionne pas !

la où chrome pose le problème, c'est au niveau du cloneNode() :

Code:

---

1 2 3

[] Uncaught TypeError: Cannot call method 'cloneNode' of null

---

et si il peut pas appeler cette fonction c'est que dans la variable template_gradient il n'y a rien ! comme vous le montre le tableau vide au dessus de l'erreur !

la où ca devient marrant (mais pas trop) c'est que je declare le gradient comme ca :
var linearGradient = document.createElementNS(svgns, 'linearGradient');
et puis je le récupere comme ca :
var template_gradient = document.getElementById('defs').getElementsByTagNameNS(svgns, 'linearGradient');

et bien si a la place de linearGradient je met n'importe quoi sans majuscule comme lineargradient ou truc le tableau n'est plus vide et possede bien ce que je veux, cependant le navigateur n'interprete bien que les balises qu'il connait. bref si je met * comme 2eme attribut du getElementByTagNameNS, dans le tableau je verrais toutes mes defs dont lineargradient sans majuscule.

donc si vous avez une idée je vous ecoute !

et sinon j'aimerais savoir si c'est possible de faire un truc comme ca *[not(animate, ...)] pour qu'il ne reste que le lineargradient dedans mais je ne connais pas la synthaxe