XHTMLforum - SVG-Bild: nach Klick soll die Auswahl farbig bleiben

Liebe Community

Ich habe eine graue SVG-Weltkarte, wobei ich mit dem Cursor über die einzelne Kontinente fahre kann und diese dann die Farbe verändern (blau). Wenn ich auf ein Kontinent draufklicke, erscheinen unterhalb der Karte der Name des Kontinents und ein paar Adressblöcke (das funktioniert soweit alles).

Nun sollte aber der ausgewählte Kontinent auf der Karte blau bleiben.. und da komme ich irgendwie nicht richtig weiter. Zuunterst habe ich einen Javascript-Code, der meiner Meinung nach genau das machen sollte.

Leider funktioniert es aber nicht - hat jemand vielleicht eine Idee woran es liegen könnte?

Den Code habe ich zur besseren Übersicht gekürzt - es werden nur zwei Kontinente angezeigt.

Code:

<g id="Weltkarte">







    <g id="Europa">

      <a id="europa-text" onclick="document.getElementById('AdrKontinente').innerHTML=document.getElementById('AdrEuropa').innerHTML;" class="svglink-eu">

      </a>

    </g>



    <g id="Südamerika">

      <a id="suedamerika-text" class="svglink-sa" onclick="document.getElementById('AdrKontinente').innerHTML=document.getElementById('AdrSuedamerika').innerHTML;" >

      </a>

    </g>





  </g>



  <script>





  function classToggleEu() {

      this.classList.toggle('svglink-eu');

      this.classList.toggle('svglink-eu-aktiv');

  }





  function classToggleSa() {

      this.classList.toggle('svglink-sa');

      this.classList.toggle('svglink-sa-aktiv');

  }



  document.querySelector('#europa-text').addEventListener('click', classToggleEu);

  document.querySelector('#suedamerika-text').addEventListener('click', classToggleSa);

  </script>