更新使用Chrome和Firefox中的<use>标签创建的SVG元素的不同行为

Question

我已经在JSFiddle中here制作了一个问题的缩减版。

我使用d3.js将类symbol的SVG路径元素动态添加到以下grouped-shapes标记中ID为defs的组中：

<defs>
  <g id="grouped-shapes">
    ...
  </g>
</defs>

然后我使用此定义两次，一次直接使用，一次通过对第一个use标记的引用：

<g id="first-triangle"> 
  <use xlink:href="#grouped-shapes" transform="translate(100, 100)"/>
</g>

<g id="second-triangle">
  <use xlink:href="#first-triangle" transform="translate(200, 200) 
  rotate(30)"/>          
</g>

（在这个例子中，我可以通过计算所有内容作为原始分组形状的转换而不是进行这种间接转换来轻松避免问题，但在我的实际用例中，这将更复杂。）

然后我设置了一个事件监听器，在单击容器div时删除类symbol的路径：

document.getElementById("kaleidoscope-container")
  .addEventListener("click", function( event ) {
    d3.selectAll(".symbol").remove();
   }, false);

在Chrome中，两个群组都会在点击时更新，但在Firefox中只有第一个更新。

以下哪些行为是正确的？我希望能够在两个实例中进行更新，就像在Chrome中一样 - 正确的解决方法是什么？