Discussion :

[celk19]

Bonjour

J'utilise Javascript avec du SVG afin de récupérer de l'information sur différents éléments du svg.

Pour cela j'utilise notamment la fonction suivante

Code :

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

1
2
3
4
function info(evt) {
      var bat = evt.target;
	  alert(bat.parentNode.getAttribute("id"));
    }

Cependant l'élément retourné ne correspond pas à un noeud parent, mais à celui d'un enfant.
Je vous mets en exemple mon code svg :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<g  id="carte" transform="rotate(0)" onclick="info(evt)"> 
		<g id="ensemblei">
			<g id="i1">
				<path style="&st29;" d="M260,3396.3l-0.2-429.1l-22-32L0.5,2957.6v424.2l182.5,19.5L260,3396.3z"/>
				<path style="&st33;" d="M238,3364.3l-0.2-429.1l-32.8-29.9L0.5,2924.1v428l160.5,17.2L238,3364.3z"/>
			</g>
			<g id="i2">
				<path style="&st29;" d="M264.1,2673.7l-0.1-428.4l-8-29l-24-29L0.5,2031.6v690.3l235.5-21.5L264.1,2673.7z"/>
				<path style="&st33;" d="M240.1,2644.7l-0.1-428.4l-8-29L0.5,2021.3v669.4l211.5-19.3L240.1,2644.7z"/>
			</g>
	</g>
</g>

Donc il me renvoie i1 ou i2, mais pas carte.
Comment faire pour que parentNode me renvoie bien la valeur du parent ?

[le_chomeur]

vérifie que bat ne pointe pas sur un de tes éléments path

[celk19]

si je change l'alert par :

Code :

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

alert(evt.target.parentNode.getAttribute("id"));

le résultat est le même

[le_chomeur]

tu n'as pas l'air de comprendre :

si bat.parentNode.getAttribute("id") = "i1" alors tu peux être certain que le noeud enfant est :

un des deux noeud :

Code :

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

1
2
3
 
<path style="&st29;" d="M260,3396.3l-0.2-429.1l-22-32L0.5,2957.6v424.2l182.5,19.5L260,3396.3z"/>
				<path style="&st33;" d="M238,3364.3l-0.2-429.1l-32.8-29.9L0.5,2924.1v428l160.5,17.2L238,3364.3z"/>

il faut donc que tu remontes encore d'un cran ...

si bat.parentNode.parentNode.getAttribute("id") , mais essaye plutot de partir
de "<g id="i1">" pour arriver sur le parent que tu désires ...

[celk19]

D'accord.

Dans ce cas, comment je peux faire pour remonter au premier parent. Car dans mon fichier svg, j'ai plusieurs <g> imbriqué les uns dans les autres, mais jamais un nombre constant ?

[le_chomeur]

rien de tel qu'une bonne vielle boucle récursive
mais il te faut un moyen d'identifier la boucle que g que tu cherches ...

[SpaceFrog]

while hasParent ?

[le_chomeur]

tout a fait , mais il faut pouvoir identifier , sur quel parent il veut s'arrêter , donc la condition sera plutôt while BonParent , avec un test a l'intérieur de la boucle

tiens pendant qu'on parle de boucle ...

selon toi spaffy vaut-il mieux utiliser un while , ou une fonction récursive ??
j'utilise régulièrement les fonctions plutôt que les whiles ....

[SpaceFrog]

Dans ce cas de figure j'utiliserais un while plutot qu'une fonction récursive même en nouvelle instance.
La sortie de la boucle while étant assurée, il n'y a pas de risque de boucler indéfiniment, et je pense que c'est plus rapide et moins gourmand .

[celk19]

merci de vos réponses. Je devrais m'en sortir maintenant.