SVG中的jQuery .offset（）在Safari中不起作用

Question

我有一个地图SVG与一些互动点。悬停点显示位于点附近的HTML div。

所以我在SVG中使用jQuery .offset()。它在Chrome和Firefox中运行良好，但它似乎在Safari中不起作用。它总是回归

{top: 0, left: 0}

HTML / SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1211" height="1198">
    (...)
    <g data-city="amsterdam">
    <path/>
  </g>
    <g data-city="london">
    <path/>
  </g>
    <g data-city="paris">
    <path/>
  </g>
  (...)
</svg>

jQuery的

    // -- Open infosbox --
  $('[data-city]').on('touchstart mouseover', function(){
    var city = $(this).attr('data-city');
    var cityEl = $('.city--'+city);
    var offset = setOffsetPosition($(this), cityEl);

    $('.city').removeClass('active');
    cityEl.offset(offset).addClass('active');
  });

  // -- Close infosbox --
  $('[data-city]').on('mouseleave', function(){
        $('.city').removeClass('active');
  });

    function setOffsetPosition($this, $el) {
        var offset = $this.offset();
        var elW = $el.width();
        var elH = $el.height();
        var marginB = 20;
        offset.top = offset.top - (elH + marginB);
        offset.left = offset.left - (elW/2);
        return offset;
    }

完整代码

这是我的codepen看到的完整代码，欢迎任何帮助

Answer 1

如果jQuery是一个针对SVG支持的库，我会称之为jQuery错误。但事实并非如此，因此他们可以说这是Safari必须修复的上游错误。

会发生什么是jQuery代码的this part：

    // Return zeros for disconnected and hidden (display: none) elements (gh-2310)
    // Support: IE <=11 only
    // Running getBoundingClientRect on a
    // disconnected node in IE throws an error
    if ( !elem.getClientRects().length ) {
        return { top: 0, left: 0 };
    }

这被认为是IE的后备，以确保不会因断开连接的DOM节点而引发错误。但是它使用接口Element.getClientRects()，如果元素在SVG名称空间中，Safari会返回一个空列表。

解决这个问题的方法是直接使用其余的代码。您知道所选节点是文档的一部分，因此提到的错误不会发生：

function setOffsetPosition($this, $el) {
    var rect = $this[0].getBoundingClientRect();
    var win = $this[0].ownerDocument.defaultView;

    var elW = $el.width();
    var elH = $el.height();
    var marginB = 20;
    return {
         top: rect.top + win.pageYOffset - (elH + marginB),
         left: rect.left + win.pageXOffset - (elW/2)
    };
}