Firefox中SVG悬停重叠元素问题：圆形悬停放大失效咨询

你遇到的问题主要是Firefox对SVG元素的CSS变换支持逻辑和其他浏览器不同，再加上原代码移动元素到根SVG时引发的坐标偏移问题，下面给你两个靠谱的修复方案：

问题拆解 #

1. Firefox的SVG Transform兼容差异：Firefox默认不会以SVG元素自身的边界盒作为变换基准，直接用transform: scale()会导致缩放行为不符合预期。
2. DOM移动引发的坐标错乱：把<circle>从子SVG移到根SVG时，坐标系统发生了变化，不仅会让圆形位置跑偏，还可能干扰hover状态的正常触发。

方案一：纯CSS+轻量JS修复（保留原有交互逻辑） #

我们调整CSS属性让Firefox正确识别缩放基准，同时修改JS逻辑避免坐标偏移：

修正后的CSS #

circle{
  transition: all 200ms ease-out;
  transform-box: fill-box; /* 指定以元素自身的填充盒作为变换基准 */
  transform-origin: center center; /* 从元素中心开始缩放 */
}

circle:hover{
  stroke: black;
  fill: white;
  transform: scale(3);
}

/* 确保所有SVG容器都不会裁剪放大后的元素 */
.svg-root, .svg-root > svg{
  overflow: visible;
}

修正后的JS #

$('.bubble').mouseover(function (e) {
  // 只把元素移到它所在的父SVG末尾，保证层级在上的同时不改变坐标系统
  $(this).parent().append(this);
});

方案二：SVG原生动画（跨浏览器兼容性拉满） #

如果想要彻底规避CSS变换的兼容问题，可以用SVG原生的<animate>标签实现交互，所有主流浏览器（包括Firefox）都能完美支持：

修改后的SVG示例（单个圆形） #

<circle class="bubble" cx="50" cy="50" r="10" fill="blue" stroke="gray">
  <!-- 鼠标悬停时放大半径 -->
  <animate attributeName="r" from="10" to="30" dur="0.2s" begin="mouseover" fill="freeze"/>
  <!-- 鼠标离开时恢复半径 -->
  <animate attributeName="r" from="30" to="10" dur="0.2s" begin="mouseout" fill="freeze"/>
  <!-- 填充色切换动画 -->
  <animate attributeName="fill" from="blue" to="white" dur="0.2s" begin="mouseover" fill="freeze"/>
  <animate attributeName="fill" from="white" to="blue" dur="0.2s" begin="mouseout" fill="freeze"/>
  <!-- 描边色切换动画 -->
  <animate attributeName="stroke" from="gray" to="black" dur="0.2s" begin="mouseover" fill="freeze"/>
  <animate attributeName="stroke" from="black" to="gray" dur="0.2s" begin="mouseout" fill="freeze"/>
</circle>

这种方式完全依赖SVG原生特性，不需要额外的JS和复杂CSS，稳定性更强。

额外小贴士 #

尽量避免在SVG内部嵌套另一个SVG，多层级的坐标系统会增加样式和交互的调试难度，能扁平化结构就尽量扁平化。

内容的提问来源于stack exchange，提问作者Toralf Schneider