Bonjour,
L'adaptation dépend de ce que tu veux faire.
Est-ce que tous les svg sont concernés ? Est-ce que ça dépend de l'endroit où tu cliques ? ...
Est-ce qu'il n'y a que des deux svg dans la page ou bien y en a-t-il d'autres ?
Il faut bien comprendre l'idée : on ajoute une classe aux svg concernés.
document.getElementById('abc') : un élément ayant abc pour id
document.getElementsByTagName('svg') : tous les éléments de type svg
Le premier svg est document.getElementsByTagName('svg')[0],
le deuxième est document.getElementsByTagName('svg')[1],
...
document.getElementsByClassName('xxx') : tous les éléments ayant pour classe xxx (on peut utiliser le même principe pour n'importe quelle classe)
Le premier élément de classe xxx est document.getElementsByClassName('xxx')[0],
le deuxième élément de classe xxx est document.getElementsByClassName('xxx')[1],
...
Tu choisis celui qui correspond au svg dont tu veux modifier la classe et tu lui ajoute .classList.toggle('showDiagnostic')
Par exemple, si tu veux ajouter/retirer la classe 'showDiagnostic' du deuxième svg du document et si ce svg n'a pas d'id, alors tu peux quand même t'en sortir et utiliser :
<circle id="rencontre" cx="28.5" cy="281.855" r="25"
onclick="document.getElementsByTagName('svg')[1].classList.toggle('showDiagnostic')"/>
...
Tu peux aussi mettre une fonction comme valeur de "onclick" et définir la fonction ailleurs. On fabrique une fonction appelée par exemple changeShowDiagnostic (on met le code correspondant entre des balises <script></script>, et on met "changeShowDiagnostic comme valeur de l'attribut "onclick" de l'objet sur lequel l'utilisateur devra cliquer pour qu'il se passe quelque chose) :
<script>
function changeShowDiagnostic()
{
document.getElementsByTagName('svg')[1].classList.toggle('showDiagnostic')
}
</script>
<circle id="rencontre" cx="28.5" cy="281.855" r="25" onclick="changeShowDiagnostic"/>
Enfin, si tu as plusieurs svg à modifier d'un coup, il te suffit de rajouter dans le code de la fonction changeShowDiagnostic autant de ligne que de svg à modifier, ou bien de faire un boucle à l'aide de l'instruction javascript "for" par exemple.
Amicalement,
Modifié par parsimonhi (25 Jan 2016 - 21:37)
