Discussion :

[SimFaridas]

Bonjour à tous
J'ai un problème pour changer le fill d'un path en svg via le JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<a href="carte.php?numTombe=173"><path class="st0" d="M64.3,1190.5H48.7c-4.1,0-7.5-3.4-7.5-7.5v-25c0-4.1,3.4-7.5,7.5-7.5h15.5c4.1,0,7.5,3.4,7.5,7.5v25
         C71.8,1187.1,68.4,1190.5,64.3,1190.5z"/></a>
<a href="carte.php?numTombe=173"><path id="num2" class="st0" d="M124.6,1190.5h-15.5c-4.1,0-7.5-3.4-7.5-7.5v-25c0-4.1,3.4-7.5,7.5-7.5h15.5c4.1,0,7.5,3.4,7.5,7.5v25
	C132.1,1187.1,128.8,1190.5,124.6,1190.5z"/></a>
<a href="carte.php?numTombe=173"><path class="st0" class="st02" d="M194.6,1190.5H179c-4.1,0-7.5-3.4-7.5-7.5v-25c0-4.1,3.4-7.5,7.5-7.5h15.5c4.1,0,7.5,3.4,7.5,7.5v25
	C202.1,1187.1,198.7,1190.5,194.6,1190.5z"/></a>

Et avec le JS j'aimerai changer le fill :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var elmnt = document.getElementById('num2');
    elmnt.style.fill = "#a4ced2";

J'ai un CSS qui me met une couleur de base aux classes .st0
et le JS me change le path avec l'id "num2"
Le problème est que rien ne se passe, le document.getElementById ne me détecte même pas l'id, il ne fonctionne qu'avec document.getElementsByClassName ou getElementsByName

Merci d'avance

[SimFaridas]

En faite c'est bon j'ai trouvé par moi même
Le problème venait de l'appelle du script
Je l'ai placé avant la création des paths ce qui ne pouvait pas être pris en compte lors de la recherche de l'id avec le getElementById
J'ai donc placé l'appelle du JS à la fin de la page html

[danielhagnoul]

Si l'ID est unique dans la page web et que votre code arrive après l'affichage du SVG, il n'y a pas de raison que cela ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.addEventListener( 'load', ev => {
  document.querySelector( "#num2" ).style.fill = "#a4ced2";
}, false );

EDIT : en retard !

[SimFaridas]

Effectivement cela fonctionne aussi
Je vais plutôt utiliser ta méthode merci !