svg在Firefox

Question

我有一个svg，其中一些圈子在悬停时会变得更大，这里是一个片段

！这不适用于Firefox

var svgRoot = $('.svg-root')[0];

$('.bubble').mouseover(function (e) {
        svgRoot.append(e.currentTarget);
    });

circle{
  transition: all 200ms;
}
circle:hover{
  stroke: black;
  fill: white;
  transform: scale(3);
}
.svg-root svg{
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="svg-root">
  <svg class="bubble" x="50" y="50">
    <circle r="10"></circle>
  </svg>
   <svg class="bubble" x="70" y="70">
    <circle r="10"></circle>
  </svg>
   <svg class="bubble" x="90" y="50">
    <circle r="10"></circle>
  </svg>
</svg>

为了避免其他圆圈与鼠标当前悬停的圆圈重叠，我使用了追加技巧。这解决了z-index问题，但它导致了另一个问题。似乎在附加节点后，Firefox无法识别光标的悬停状态。在Firefox中悬停时圈子不会缩放，但它们会在Chrome中。

我需要它们在悬停时进行缩放，并且在执行此操作时具有最高的z-index。

任何解决方案？