Получить идентификатор из пути в SVG

Question

Итак, у меня есть этот SVG

https://github.com/Cphdat3sem2017f/StartcodeExercises/blob/master/JS/Countries_Europe.svg?short_path=6bcbfa5

Мне удалось подключить EventListener и выборку для получения информации о странах при нажатии.Это я сделал, просто позвонив бывшим.document.getElementById ( "дк").Есть ли способ, и если да, то как, где я могу получить идентификаторы внутри путей, чтобы я мог проходить через них и в итоге получить только один вызов вместо одного для каждой страны?

Код:

import "bootstrap/dist/css/bootstrap.css";

const root = document.getElementById("root");
var svg = document.getElementById("svg");

const country = "https://restcountries.eu/rest/v1/alpha?codes=";

svg.addEventListener("load", function() {
  var svgDoc = svg.contentDocument;

  var countries = svgDoc.children;
  for (let i = 0; i < countries.length; i++) {
    //alert(countries[i].id);
    countries[i].addEventListener("click", function(event) {
      alert(countires[i]);
      getCountryInfo(countries[i].id);
    });
  }

  svgDoc.addEventListener("click", function(event) {
    getCountryInfo(event.id);
  });

  var denmark = svgDoc.getElementById("dk");
  denmark.addEventListener("click", function() {
    getCountryInfo("dk");
  });

  var sweden = svgDoc.getElementById("se");
  sweden.addEventListener("click", function() {
    getCountryInfo("se");
  });

  var germany = svgDoc.getElementById("de");
  germany.addEventListener("click", function() {
    getCountryInfo("de");
  });

  var norway = svgDoc.getElementById("no");
  norway.addEventListener("click", function() {
    getCountryInfo("no");
  });

  var spain = svgDoc.getElementById("es");
  spain.addEventListener("click", function() {
    getCountryInfo("es");
  });

  var iceland = svgDoc.getElementById("is");
  iceland.addEventListener("click", function() {
    getCountryInfo("is");
  });
});

function getCountryInfo(landCode) {
  fetch(country + landCode)
    .then(res => res.json()) //.then(res=>{ return res.json()})
    .then(data => {
      var table = "";
      table +=
        '<table border="1" style="border-spacing: 5px; table-layout: auto; width: 45%;">';
      table += "<tr>";
      table += "<th>Name</th>";
      table += "<th>Capital</th>";
      table += "<th>Also known as</th>";
      table += "<th>Region</th>";
      table += "<th>Population</th>";
      table += "<th>Languages</th>";
      table += "</tr>";
      data.forEach(country => {
        table += "<tr>";
        table += "<td>" + country.name + "</td>";
        table += "<td>" + country.capital + "</td>";
        table += "<td>" + country.altSpellings + "</td>";
        table += "<td>" + country.region + "</td>";
        table += "<td>" + country.population + "</td>";
        table += "<td>" + country.languages + "</td>";
        table += "</tr>";
      });
      table += "</table>";
      root.innerHTML = table;
    });
}

Как вы можете видеть, мы пытались получить их, получая дочерние элементы, но мы застряли и не могли найти ответ.

Answer 1

Не уверен, что children разрешает в этом контексте, но вы можете получить пути непосредственно через запрос:

[...svgDoc.querySelectorAll('path')].forEach(path => {
    path.addEventListener('click', e => {
        alert(path.id);
    })
})