动态创建许多 SVG `<use>` 元素 [重复]

Question

我想要一个循环，在<svg> 中创建许多相同的视觉元素。我打算使用<use> 来促进相同元素的复制。

JavaScript 成功添加了 <use> 元素，但由于某种原因它们不可见。

有趣的是，如果我从浏览器保存网页并打开保存的副本，添加的元素就会变得可见。也许需要调用某种刷新函数？

for (var x = 0; x < 100; x += 30) {
    for (var y = 0; y < 100; y += 30) {
        var use = document.createElement('use');
        use.setAttribute('x', x);
        use.setAttribute('y', y);
        use.setAttribute('href', '#cube');
        use.setAttribute('onclick', 'foo()');
        document.getElementById('mysvg').appendChild(use);
    }
}

<svg id="mysvg">
  <defs>
  <g id="cube">
    <rect width="21" height="24"/>
  </g>
  </defs>
    <use href="#cube" x="121" y="12"/>
    <use href="#cube" x="100" y="24"/>
</svg>

Answer 1

试试

var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');

而不是

var use = document.createElement('use');

来源：this answer。