Как заменить элемент SVG - PullRequest
0 голосов
/ 03 июля 2019

У меня есть документ 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());
  }
};

1 Ответ

1 голос
/ 03 июля 2019

Попробуйте сохранить порядок элементов, заменив каждый из них ссылкой вместо добавления ссылок в конец в порядке Countries.Countries (при условии, что ссылки и пути (?) Имеют общий родительский элемент).

Итаквместо этого:

svgDoc.documentElement.appendChild(link);

сделать это:

x.parentNode.replaceChild(link, x);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...