SVG地图上的addEventListener无法正常工作，有什么解决方案吗？

Question

我正在为组织编码网站。我决定将wordpress用作CMS，因此实际上是从头开始创建模板。他们需要一个交互式地图，只要有人单击它，它就会显示位置信息。我看了一些教程，但这是我第一次做wp模板（我对js和php很陌生）。

我的地图是一个svg文件，并且不同区域都有“ villes”类。

<div class="app">
    <div class="map">
    <?php include('carte.svg');?>
    </div>
    <div class="agenda">
        <?php
            listCityEvents();
        ?>
    </div>

<path
 id="ville_honnecourt"
 class="st0 villes"
 d="M245.1,291.8l42.5-20.5l48.2,28.4c0,0,7.6,7.6-5.4,19.8s-27.7-0.7-37.8,9.7  s-7.9,22.3-23.8,22.3S240,340.8,240,340.8L245.1,291.8z"
 inkscape:label="#ville_honnecourt" />

我的想法是添加一个事件侦听器，以侦听所有具有“ villes”类的元素的点击。

var villes = document.getElementsByClassName("villes");     
for (var i=0; i < villes.length; i++){ 
   villes.addEventListener('click', function(){
       alert("clicked");
   });    
}

什么都没发生。

一个好朋友给我发送了一个stackoverflow链接，所以我尝试了：

var villes = document.getElementsByClassName("villes");

villes.addEventListener('load', function(){

    for (var i = 0; i < villes.length; i++){

        var svgDoc = villes.contentDocument;
        var delta = svgDoc.getElementById('[id^="ville"');
        delta.addEventListener('click', function(){
            alert('clicked');
        });
    };
});

我尝试了一个测试（即使我想听到所有区域的点击声）：

var delta = svgDoc.getElementById('ville_honnecourt');

但是没有用。

我试图抛出一些console.log（）以获得一些信息，但是什么也没有发生。我在控制台中得到以下内容：

 scripts.js?ver=1:4 Uncaught TypeError: villes.addEventListener is not a function
at scripts.js?ver=1:4

任何解决方案吗？