Discussion :

[sebaaas]

Bonjour à tous,

J'ai une image SVG du type

Code html :

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

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

[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

[sebaaas]

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 html :

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

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

[mathieu]

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 html :

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

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 ?

[sebaaas]

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

[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?

[NoSmoking]

Bonjour,

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 :

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

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

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 :

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

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

[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.

[sebaaas]

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

Merci ! Je ne connaissais pas .

[CosmoKnacki]

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

Qu'est ce que tu tentes de réaliser (dans un sens plus large)? Que dois produire le click sur un rectangle?

[sebaaas]

Bonjour,

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

L'inclure dans un autre champs via document.getElementById("id").innerHTML

[sebaaas]

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

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 .