Cherche ID dans une image SVG

Version imprimable

Bonjour à tous,

J'ai une image SVG du type

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<svg width="1000" height="274" id="svg" name="svg" >
	<rect id="svg_1" x="0" y="0" width="53" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005343166)"><desc>42005343166 </desc><title> []</title></rect>
	<rect id="svg_2" x="53" y="0" width="6" height="10" style="fill:red" onclick="changer_image_a_partir_SVG(42005343178)"><desc>42005343178 </desc><title> []</title></rect>
	<rect id="svg_3" x="59" y="0" width="600" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005379150)"><desc>42005379150 </desc><title> []</title></rect>
	<rect id="svg_4" x="659" y="0" width="13" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005379250)"><desc>42005379250</desc><title> [635]</title></rect>
	<rect id="svg_5" x="672" y="0" width="10" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005379875)"><desc>42005379875 </desc><title> []</title></rect>
	<rect id="svg_6" x="682" y="0" width="6" height="10" style="fill:red" onclick="changer_image_a_partir_SVG(42005379887)"><desc>42005379887 </desc><title> []</title></rect>
	<rect id="svg_7" x="688" y="0" width="12" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005379986)"><desc>42005379986</desc><title>Voo [1065]</title></rect>
	<rect id="svg_8" x="700" y="0" width="84" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005384998)"><desc>42005384998 </desc><title> []</title></rect>
	<rect id="svg_9" x="0" y="11" width="68" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005389098)"><desc>42005389098 </desc><title> []</title></rect>
	<rect id="svg_10" x="68" y="11" width="12" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005389196)"><desc>42005389196</desc><title> [503]</title></rect>
	<rect id="svg_11" x="80" y="11" width="6" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005389570)"><desc>42005389570 </desc><title> []</title></rect>
	<rect id="svg_12" x="86" y="11" width="7" height="10" style="fill:red" onclick="changer_image_a_partir_SVG(42005389583)"><desc>42005389583 </desc><title> []</title></rect>
	<rect id="svg_13" x="93" y="11" width="12" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005389681)"><desc>42005389681</desc><title> [505]</title></rect>
	<rect id="svg_14" x="105" y="11" width="379" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005412417)"><desc>42005412417 </desc><title> []</title></rect>
	<rect id="svg_15" x="484" y="11" width="12" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005412515)"><desc>42005412515</desc><title> [15]</title></rect>
	<rect id="svg_16" x="496" y="11" width="20" height="10" style="fill:blue" onclick="changer_image_a_partir_SVG(42005413140)"><desc>42005413140</desc><title>Classic 21 [256]</title></rect>
	<rect id="svg_17" x="516" y="11" width="6" height="10" style="fill:red" onclick="changer_image_a_partir_SVG(42005413152)"><desc>42005413152 </desc><title> []</title></rect>
	<rect id="svg_18" x="522" y="11" width="12" height="10" style="fill:green" onclick="changer_image_a_partir_SVG(42005413249)"><desc>42005413249</desc><title> [374]</title></rect>
	<rect id="svg_19" x="534" y="11" width="279" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005429999)"><desc>42005429999 </desc><title> []</title></rect>
	<rect id="svg_20" x="0" y="22" width="750" height="10" style="fill:black" onclick="changer_image_a_partir_SVG(42005475000)"><desc>42005475000 </desc><title> []</title></rect>
</svg>

J'aimerai obtenir l'ID du rect qui contient une "desc" égale à une donnée en particulier.
Par exemple, la desc 42005429999 doit me donner l'id : svg_19

Merci de votre aide

31/03/2023, 22h37
mathieu

je pense que vous aurez besoin de ces 2 éléments :
https://developer.mozilla.org/fr/doc...mentsByTagName
https://developer.mozilla.org/fr/doc...de/textContent

Bonjour,

J'avance. J'ai un peu modifié le code en ajouter une balise name dans le SVG. Par contre la fonction getElementsByName fonctionne avec les div mais pas avec mon SVG.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<body>
<p id="DIV">
bonjour
</p>
<div>
<div id="svg_1" onclick="changer(1)" name="1">1</div>
<div id="svg_2" onclick="changer(2)" name="2">2</div>				
<div id="svg_3" onclick="changer(3)" name="3">3</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="svg_4" x="0" y="0" width="10" height="10" style="fill:black" onclick="changer(4)" name="4"><desc>4</desc></rect>
<rect id="svg_5" x="0" y="10" width="10" height="10" style="fill:red" onclick="changer(5)" name="5"><desc>5</desc></rect>
<rect id="svg_6" x="0" y="20" width="10" height="10" style="fill:green" onclick="changer(6)" name="6"><desc>6</desc></rect>
</svg>
 
<script>
function changer(test) {
var elements = document.getElementsByName(test);
var id=elements[0].id;
document.getElementById("DIV").innerHTML = id;
}
</script>
 
</body>
</html>

Lorsque je clique sur 1,2 ou 3 => pas de soucis, cela fonctionne.
Par contre, lorsque je clique sur le svg => rien ne se passe ... sous Firefox. Par contre sous Chrome, le résultat est bon

Une idée?

Merci

je n'ai pas l'habitude d'utiliser les "name" donc j'ai modifié votre test mais ensuite je ne sais pas si ça correspond au test que vous vouliez faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<p id="DIV">
bonjour
</p>
<div>
<div id="svg_1" onclick="changer(1)" name="uu1">1</div>
<div id="svg_2" onclick="changer(2)" name="uu2">2</div>				
<div id="svg_3" onclick="changer(3)" name="uu3">3</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="svg_4" x="0" y="0" width="10" height="10" style="fill:black" onclick="changer(4)" name="uu4"><desc>4</desc></rect>
<rect id="svg_5" x="0" y="10" width="10" height="10" style="fill:red" onclick="changer(5)" name="uu5"><desc>5</desc></rect>
<rect id="svg_6" x="0" y="20" width="10" height="10" style="fill:green" onclick="changer(6)" name="uu6"><desc>6</desc></rect>
</svg>
 
<script>
 
function changer(test) {
let id = "svg_" + test;
var elements = document.getElementById(id);
document.getElementById("DIV").innerHTML = id;
}
</script>

dans votre 1er message vous disiez "Par exemple, la desc 42005429999 doit me donner l'id : svg_19". d'où vient cette donnée "42005429999" dans cette demande ?

12/05/2023, 07h48
sebaaas

Citation:

Envoyé par mathieu

dans votre 1er message vous disiez "Par exemple, la desc 42005429999 doit me donner l'id : svg_19". d'où vient cette donnée "42005429999" dans cette demande ?

Effectivement j'ai simplifier la desc afin de rendre le code plus lisible mais il n'y a pas de correspondance entre l'ID et la desc/name.

Je pense qu'il y a un bug au niveau de Firefox car mon code fonctionne avec Chrome
12/05/2023, 15h14
CosmoKnacki

J'ai l'impression qu'on est dans un problème XY. Qu'est ce que tu tentes de réaliser (dans un sens plus large)? Que dois produire le click sur un rectangle? Pourquoi as-tu besoin de récupérer l'id du rectangle sur lequel tu viens de cliquer?

Bonjour,

Citation:

Envoyé par sebaaas

Je pense qu'il y a un bug au niveau de Firefox car mon code fonctionne avec Chrome

je pense plutôt que Chrome a « élargi » la fonctionnalité de getElementsByName qui n'est pas originellement faite pour cela.

Pour mettre tout le monde d'accord tu peux te tourner vers :
Code:

1 2 // éléments qui ont un attribut name et ce quelque soit sa valeur const elements =document.querySelectorAll("[name]");
Citation:

Envoyé par CosmoKnacki

J'ai l'impression qu'on est dans un problème XY.

je le pense également, pourquoi chercher l'élément cliqué quand on le connait via le gestionnaire d'événement ?

D'autres part tu écris et réécris dans le HTML ce qui devrait être dans la partie <script></script> de ta page, exportable par la suite.
Un code de ce type serait plus « propre » :
Code:

1 2 3 4 5 6 7 8 9 10 const allElements = document.querySelectorAll("[name]"); allElements.forEach((el) => { el.addEventListener("click", (e)=> { // récupération possible de l'élénent cliqué const elClicked = e.target; // ou en utilisant directement el const id = el.id; document.getElementById("DIV").innerHTML = id; }); });
Nota : mettre une id="DIV" à un élément <p> ne m'apparaît pas très judicieux ;)

12/05/2023, 21h46
sebaaas

Bonjour et merci de vous pencher sur mon cas.

Pour être complet, sur base de la donnée "42005343178" (balise desc ou name), j'aimerai obtenir l'ID du rect ( dans ce cas "svg_2") afin, par la suite, de trouver la donnée "42005379150" qui est la balise desc/name de "svg_3".

Donc
1) "42005343178" (desc ou name) -> svg_2 (id du rect)
2) svg_2+1 => svg_3 (id du rect ) et j'obtiens 42005379150 qui est la balise name de l'id svg_3

J'espère être un peu plus claire sur mes intentions.
12/05/2023, 21h48
sebaaas

Citation:

Envoyé par CosmoKnacki

J'ai l'impression qu'on est dans un problème XY.

Merci ! Je ne connaissais pas .
12/05/2023, 22h32
CosmoKnacki

Et quand tu auras trouvé 42005379150, tu en feras quoi ?

Citation:

Qu'est ce que tu tentes de réaliser (dans un sens plus large)? Que dois produire le click sur un rectangle?
13/05/2023, 08h52
sebaaas

Bonjour,

Citation:

Envoyé par CosmoKnacki

Et quand tu auras trouvé 42005379150, tu en feras quoi ?

L'inclure dans un autre champs via document.getElementById("id").innerHTML
13/05/2023, 13h53
sebaaas

Citation:

Envoyé par NoSmoking

je pense plutôt que Chrome a « élargi » la fonctionnalité de getElementsByName qui n'est pas originellement faite pour cela.

Effectivement,

https://html.spec.whatwg.org/multipa...entsbyname-dev

Citation:

The getElementsByName(elementName) method steps are to return a live NodeList containing all the HTML elements in that document that have a name attribute whose value is identical to the elementName argument, in tree order.

Le SVG n'est pas un élément HTML .