Question

我有一个svg文档-世界地图，该文件位于其自己的文件中。我从数据库中获取了一些数据，然后通过将xlink添加到文档末尾的相应国家/地区来进行循环。但是，发生这种情况时，将在其他节点上绘制附加的xlink。例如，南非国家的边界内有莱索托。南非获得联系，然后最终覆盖莱索托。创建链接后，如何确保莱索托可访问或重绘？这是我正在使用的代码。

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());
  }
};

Answer 1

尝试通过用链接替换每个元素来保持元素的顺序，而不是以Countries.Countries的顺序在末尾添加链接（假设链接和路径（？）共享父级）。

所以代替这个：

svgDoc.documentElement.appendChild(link);

执行此操作：

x.parentNode.replaceChild(link, x);

如何替换SVG元素

1 个答案: