У меня есть документ svg - карта мира, которая находится в своем собственном файле.Я получаю некоторые данные из базы данных, которые затем перебираю, добавляя xlink в соответствующие страны, которые добавляются в конец документа.Однако, когда это происходит, добавленные xlinks отображаются поверх других узлов.Например, страна Южной Африки имеет Лесото в своих границах.Южная Африка получает связь, а затем покрывает Лесото.Как убедиться, что Лесото доступно или перерисовано после создания ссылки?Это код, который я использую.
window.onload = function() {
// Get the Object by ID
var a = document.getElementById("SVGWorldMap");
// Get the SVG document inside the Object tag
var svgDoc = a.contentDocument;
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("ocean");
// Set the colour to something else
svgItem.style.fill = "#5593BB";
for (let i = 0; i < Countries.Countries.length; i++) {
var x = svgDoc.getElementById(Countries.Countries[i].locCountry.toLowerCase());
var link = svgDoc.createElementNS("http://www.w3.org/2000/svg", "a");
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "../Scripts/prodList.aspx?idLocation=" + Countries.Countries[i].idLocation);
link.setAttribute('target', '_top');
svgDoc.documentElement.appendChild(link);
x.style.fill = "#123456";
x.addEventListener('mouseover', mouseOverEffect);
x.addEventListener('mouseout', mouseOutEffect);
link.appendChild(x);
//console.log(Countries.Countries[i].locCountry.toLowerCase());
}
};