SVG/JAVASCRIPT

Bonjour,

Voila je rencontre un petit problème avec mon code.

Bonjour j'ai créer une carte en SVG, avec des liens, mon problème c'est que lorsque je survole les régions sur ma carte, je souhaiterai que cela active les liens correspondant et vis versa. Mais cela ne fonctionne pas. j'ai beau chercher, je ne trouve pas l'erreur sur mes lignes de codes Java. Merci pour votre aide

Décrivez ici votre code ou ce que vous cherchez à faire

HTML
<div class="Map" id="Map"></div>
<div class="map__image">
<svg version="1.1" id="Calque_1" xmlns:amcharts="http://amcharts.com/ammap"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 832 907"
style="enable-background:new -17 -36.1 832 907;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B28979;stroke:#FFFFFF;stroke-width:0.5;}
.st1{fill:#C19474;stroke:#FFFFFF;stroke-width:0.5;}
.st2{fill:#DC8B27;stroke:#FFFFFF;stroke-width:0.5;}
.st3{fill:#BC6225;stroke:#FFFFFF;stroke-width:0.5;}
.st4{fill:#E3E419;stroke:#FFFFFF;stroke-width:0.5;}
.st5{fill:#F68A21;stroke:#FFFFFF;stroke-width:0.5;}
.st6{fill:#FFBF86;stroke:#FFFFFF;stroke-width:0.5;}
.st7{fill:#FF3300;stroke:#FFFFFF;stroke-width:0.5;}
</style>
<g>
<a id="région-7" xlink:title="Ogooué-Lolo" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=7">
<path class="st0" d="M566.3,285.3l-27-6l-20.8,93l-123.2,48.3l-1.8,49.5l28.3-6.7l37.4,45.9l0.3,32.5l58.1,36.7l18.3-10
l21.7,8.8l23.2-57.9l35.5-29.1l-1.2-19.7l14.7,5.5l40.3-53.3l-42.2-78.2l4.1-33.3l-32-25L566.3,285.3z"/>
</a>
<a id="région-2" xlink:title="Haut-Ogooué" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=2">
<path class="st1" d="M657.7,312.3l-25.8-1l-4.1,33.3l42.2,78.2l-40.3,53.3l-14.7-5.5l1.2,19.7l-35.5,29.1l-23.2,57.9
l36.8,53.2l-5.4,13.2l67.5,9.5l39.1-47.4l22.4,36.2l-6.1,16.7l31.4,2.4l19.9-19.8l-11.9-17.9l41.4-74.2l-11.6-10.2l16.9-27.9
l-13.2-55.2l14.7-52.1l-19.3-23.3l-27.4-0.9l-8.9-24.6l-30-2.2l1.5-23.2L657.7,312.3z"/>
</a>
<a id="région-8" xlink:title="Ogooué-Maritime" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=8">
<path class="st1" d="M45.3,420.9L43,398.5l-7.6,9.5L45.3,420.9z M120.9,396.4l-36.4-42.2l-40.6,83l-11.3-25.8L21,427
L0.5,397.6l19.8,46.3l2.4-0.9l2.8,8l8-1.4l-3.8,6.2l-5.6-4.3l13.7,17.5l3.8,16l0.4-9l4.9,5.3l0.7,3.2l-2.7,1.9l0.4,7.1l11.8,8.8
l5.4-1.9l1.6,8.7l3.8,2.1l20.6-17.5l-6.7,38.9l23.4-13.2l14.2,18.9L81,547.5l-2.2-19.2L64.3,519l-10.6-17.2l-3.9-2.6l-2.1,0.2
l-2.7-3l-4.9-10.2l4.5,11.7l17.2,24.1l10.8,12.2l4.9,35.2l36.1,12.6l3.5,19.9l-10.5-20.5l-27-6.3l44.8,65.5l77.8,28.7l-25.5,9.4
l-18.9-23.7l-18.8-1.9l35.6,41.7l50.1-13.9l14.4-32.3l24.4-13.8l-20.4-47.6l-66.4-19.3l-14.2-19.5l26.5-58.9l-21.5-12.9l1.8-30.6
l-34-13.4L120.9,396.4z"/>
</a>
<a id="région-5" xlink:title="Nyanga" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=5">
<path class="st2" d="M333.5,859.3l13.6-33.1l37.2-25.9l25.2,25.1l31.9-3.5l-9.6-16.3l16.1-33.8l-35.4-18.2l12.5-22.8
l-33.4-27.7l-64.7-74.6l-63.1,6.4l-24.4,13.8l-14.4,32.3L174.8,695l92.8,78.3l1.5,19.1L333.5,859.3z"/>
</a>
<a id="région-4" xlink:title="Ngounié" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=4">
<path class="st3" d="M395.2,420.6l-55.5-24.5L271,403l-41.7,73.7l-22.3-2.5l-17.8,15.6l-26.5,58.9l14.2,19.5l66.4,19.3
l20.4,47.6l63.1-6.4l64.7,74.6l12.2-23.7l-8-41.8l26.1,11.8l96.8-11.7l-1.3-59.3l-58.1-36.7l-0.3-32.5l-37.4-45.9l-28.3,6.7
L395.2,420.6z"/>
</a>
<a id="région-3" xlink:title="Moyen-Ogooué" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=3">
<path class="st4" d="M291.2,284.9l-19.1,3l-16.6,35.7l-60.3,45l-14.9,5.4l-13.6-15.6l-46.2,15.8l0.4,22.2l14.6,36.3
l34,13.4l-1.8,30.6l21.5,12.9l17.8-15.6l22.3,2.5L271,403l68.7-6.9l55.5,24.5l-38.9-93.9l41.7-41.5L291.2,284.9z"/>
</a>
<a id="région-9" xlink:title="Woleu-Ntem" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=9">
<path class="st5" d="M366.2,0l-2.1,179.3l-126.9-0.4l-1.5,49.9l76.7-24.6l-21.2,80.8l106.8,0.2l-14.5-16.8l100.2-68.3
l20.7-53.2l114.3,1.7l7.5-28.3L611,97.6l19.3-91.4L423.5,2.8L366.2,0z"/>
</a>
<a id="région-6" xlink:title="Ogooué-Ivindo" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=6">
<path class="st6" d="M740.6,127.5l-38-8.2l-84,29.2l-114.3-1.7l-20.7,53.2l-100.2,68.3l14.5,16.8l-41.7,41.5l38.9,93.9
l123.2-48.3l20.8-93l27,6l33.6,1l32,25l25.8,1l57.7,17.2l7.9-60.9l18-26l34.8-11.3l19.2-40.2l-29.7-57.5L740.6,127.5z"/>
</a>
<a id="région-1" xlink:title="Estuaire" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=1">
<path class="st7" d="M95.3,205.4l-1,0l0.4,0.4L95.3,205.4z M150.2,180.5l-13.3-9.8l-16.6,10.8l5.7,70.8l-4.8-17.9h-15
l10.3-11.4l-30.7,7.6l-1.4,11.3l26.5,34.9l72.6,14.2l-36.8,8.6l7.4,14L111.8,291l-2.2,12.3L92,291.9l-2-24.1l-5.4,86.4l36.4,42.2
l-0.4-22.2l46.2-15.8l13.6,15.6l14.9-5.4l60.3-45l16.6-35.7l19.1-3l21.2-80.8l-76.7,24.6l1.5-49.9l-59.8,0.7l-5.1,10L150.2,180.5z"
/>
</a>
</g>
</svg>
</div>
<div class="map__list">
<ul>

<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-1" target="_blank" id="list-1">Estuaire</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-2" target="_blank" id="list-2">Haut-Ogooué</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-3" target="_blank" id="list-3">Moyen-Ogooué</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-4" target="_blank" id="list-4">Ngounié</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-5" target="_blank" id="list-5">Nyanga</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-6" target="_blank" id="list-6">Ogooué-Ivindo</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-7" target="_blank" id="list-7">Ogooué-Lolo</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-8" target="_blank" id="list-8">Ogooué-Maritime</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-9" target="_blank" id="list-9">Woleu-Ntem</a></li><br>
</ul>

</div>
CSS
.mapimage
{
width: 50%;
float: left;
transition: fill 0.3s;
stroke: #FFFFFF;
stroke-width: 1px;
}
.mapimage .is-active path
{
fill: #0127af;
}

ul
{
list-style-type: none;
}
}
.maplist li
{
margin-left: 800px;
width: 100%
font-family: verdana;
list-style-type: none;
color: #0127af;
}
.maplist a
{
color: inherit;
transition-color: 0.3s;
text-decoration: none;
}
.map__list a .is-active
{
color: #0127af;
font-weight: bold;
text-decoration: underline;

}
JAVASCRIPT
<script type="text/javascript">
var map = document.querySelector('#map')
var paths = document.querySelectorAll('.mapimage a')
var links = document.querySelectorAll('.maplist a')
//Polyfill du forEach
if (NodeList.prototype.forEach === undefined) {
NodeList.prototype.forEach = function (callback) {
[].forEach.call(this, callback)
}
}
paths.forEach(function (path) {
path.addEventListener ('mouseenter', function (e) {
var id = this.id.replace('région-','')
map.querySelectorAll('.is-active').forEach(function (item) {
item.classList.remove('is-active')
})
document.querySelector('#list-' + id).classList.add('is-active')
document.querySelector('#région-' + id).classList.add('is-active')
})

})
</script>
Entourez votre code pour bien le mettre en forme

### Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

### Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(