jQuery .offset()获取SVG元素位置在Safari返回0 Chrome运行正常如何解决

问题原因 #

这个是jQuery 3.4.0之前版本的已知兼容性缺陷，原因是旧版jQuery的offset()方法实现逻辑只适配了普通HTML元素，未考虑SVG元素的DOM属性差异：Safari中SVG元素不存在offsetTop、offsetLeft等普通HTML元素具备的布局属性，旧版jQuery读取不到对应值就会默认返回{top:0, left:0}，而Chromium内核浏览器额外做了兼容处理，所以不会出现问题。

可行修复方案 #

这里提供两种可直接落地的方案，根据你的项目情况选择即可： #

方案1：升级jQuery版本（成本最低） #

直接将jQuery升级到3.4.0及以上版本，该版本官方已经修复了SVG元素的offset()兼容性问题，业务代码不需要做任何修改即可在Safari中正常运行。 #

方案2：手写兼容方法（无需改jQuery版本） #

如果你的项目因为历史原因不能升级jQuery，可以自己实现兼容SVG的坐标获取方法，替代jQuery原生的offset()调用：

// 兼容SVG元素的坐标获取方法
function getElementOffset(ele) {
  const rect = ele.getBoundingClientRect();
  return {
    top: rect.top + window.pageYOffset,
    left: rect.left + window.pageXOffset
  }
}

// 业务代码修改为调用自定义方法
$("#el").hover(function () {
  let position = getElementOffset(this);
  $('#popover').css(position);
});

该方法基于原生DOM的getBoundingClientRect()实现，兼容所有主流浏览器，性能和稳定性都优于旧版jQuery的offset逻辑。

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