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

Question

我正在动态添加多个 SVG，然后修改每个 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

长话短说：

使用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

上的错误

因为这是一个 function-vs-block-scope 问题，您可以将整个功能移到一个函数中并调用它，这会将范围锁定到该函数：

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

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

How can I create and modify multiple SVGs dynamically

javascript

svg

长话短说：

`var` 和 `const`/`let` 的行为不同

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

How can I create and modify multiple SVGs dynamically

javascript

svg

长话短说：

var 和 const/let 的行为不同

`var` 和 `const`/`let` 的行为不同