Svg (concerne format et js sans doute)

Bonjour à vous,
Je développe une carte interactive (france départements) avec des marqueurs qui aux clics mettront en exergue via changement de couleurs département des zones d'interventions,.

La carte est en svg.
J'aimerai qu'au survol de chaque départements le n° apparaissent (comme dans un 'alt' sur une image en html).
Mais voila le langage svg et les paths n'acceptent pas les alt, ni les titles, ni les datas...
Par contre si je mets un titre à ma carte, celui-ci apparait comme un alt à chaque hover sur département.

J'aimerai que ce titre ne soit pas visible mais peut-être que via js, il est possible de demander qu'a chaque id departement , le titre change avec le n° du département ?

je vous partage le code de deux départements :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
	 height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600">
<title>ma carte<title>
<g id="Departements">
	<g>
		<g>
			<path data-departement="57" id="dept-57"  fill="#edebeb" stroke="#999999" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" d="M522.1,129.7
				l-6.399,4.1l-6.9-1.2l-2.5,1.2l-2.3-3.9l-3-1.4l-2.8,1.6l-0.3,2.9l-2.7-0.7l-8-9.1l-1.7-5.9l-3-2l-11.1-2.6l-4.4,3.5l-2.8,0.1
				L459.1,114l2.4,9.4l2.5,1.6l1.2,3.6l-1.601,3.1l0.9,5.6l-2.8,0.1l4.399,7.5l11.5,4l-0.399,2.8l2.7,5.2l8.5,1.5l5.3,3.8
				l14.399,5.4l2,2.6l3.5,0.4l2.2-1.8l3-13.3l-4.3-3.4l-2.9-0.4l-1.399,2.5l-2.3-1.6l1.699-2.5l-5.5-2.4l4.9-10.8l0.8,2.8l9.101,4.6
				l8.899-0.3l1.4-2.6l1.399-4.3H530.4L522.1,129.7z" />
				<textPath href="#dept-57">département 57</textPath>
			<path data-departement="67" id="dept-67" fill="#edebeb" stroke="#999999" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" d="M518.9,144.3
				l-9.101-4.6l-0.8-2.8l-4.9,10.8l5.5,2.4l-1.699,2.5l2.3,1.6l1.399-2.5l2.9,0.4l4.3,3.4l-3,13.3l-2.2,1.8l-3.5-0.4l1.9,1.4l0,0
				l-1.3,10l5.2,2.2l3.1,0.2l8.5,5.6l0.3,2.8l4.2,2l5.8-13.7l1.4-15.7l10.5-13.7l3.899-10.6l-8.5-3l-14.5-0.6l-1.399,4.3l-1.4,2.6
				L518.9,144.3z"/>
</g>
</svg>

Merci de vos suggestions
Modifié par JustEpic (28 Nov 2023 - 12:20)

Bonjour,

Je viens d'éditer ton message en suivant l'indication que tu nous as données ; j'espère que c'est OK ainsi

Hello,
Est-ce qu'il ne serait pas possible d'avoir une structure comme ceci:

<svg>
   <g><!-- un group par région -->
      <path /><!-- Région -->
      <text /><!-- Titre -->
      <text /><!-- Description -->
   </g>
</svg>

text { opacity: 0; }
path:hover ~ text { opacity: 1; }

Bonjour,

Il y a une possibilité via javascript.
par exemple :

const titlemap = document.querySelector("svg title");
const defTitle = titlemap.textContent;
for (let e of document.querySelectorAll("svg path")) {
  e.addEventListener("mouseover", function () {
    titlemap.textContent = e.getAttribute("data-departement");
  });
  e.addEventListener("mouseleave", function () {
    titlemap.textContent = defTitle;
  });
}

On peut récupérer le contenu du data-attribute au survol et on remet l'original en sortant de la zone.
non testé, mais voilà l'idée.
cdt
Modifié par gcyrillus (28 Nov 2023 - 17:12)