如何动态创建和修改多个 SVG

Question

我正在动态添加多个 SVG，然后修改它们中的每一个。 如果没有事件侦听器，则看不到地图。 但是，现在，事件侦听器似乎创建了最后一个循环的多个实例，而不是每个循环一个，只有最后一个实例被修改，但多次使用相同的mygroup,svgID 。

for (var i=0; i<path.length; i++) {
    var mygroup = path[i], svgID = "svgMap" + i
    const iSVG = document.createElement("object")
    document.getElementById("summary-mygroup").appendChild(iSVG)
    iSVG.id = svgID
    iSVG.type = "image/svg+xml"
    iSVG.data = "Maps/mygroup_basemap.svg"
    iSVG.addEventListener('load', function(){
        createMap(mygroup,svgID)
    })
}

Answer 1

TL;博士：

使用const代替var

const mygroup = path[i], divID = "div" + i, svgID = "svgMap" + i

---

您所看到的是由于function()使用mygroup 、 divID和svgID形成了循环的范围，该范围不断更新，直到函数执行（全部具有最新值）。 发生这种情况是因为使用了相同的变量。

var和const / let的行为不同

var作用于函数，而let / const作用于块。 （ var也被提升，但这与问题的关系不大）

所以如果你运行：

for (var i=0; i < 3; i++){
    var b = i
  setTimeout(function(){console.log(b)},1)// 😡 2,2,2
}
console.log("B:", b) // 😬 2

您不会期望console.log("B:", b)运行时没有错误，但确实如此，因为 var 的范围存在于函数之外。

而如果你使用let或const

for (var i=0; i < 3; i++){
  let b = i;
  setTimeout(function(){console.log(b)},1)// 👍 0,1,2
}
console.log("B:", b)  // 👍 throws error

您将有预期的行为，包括 console.log 上的错误

而且因为这是一个函数与块范围的问题，你可以将整个功能移动到一个函数中并调用它，这将锁定函数的范围：

for (var i=0; i < 3; i++){
  (function(){
    var b = i
    setTimeout(function(){console.log(b)},1)// 👍 0,1,2
  })()
}