jQuery .offset () внутри SVG не работает в Safari - PullRequest
Новая
       12

jQuery .offset () внутри SVG не работает в Safari

0 голосов
/ 20 февраля 2019

У меня есть карта SVG с некоторыми интерактивными точками.При наведении курсора на точку отображается HTML div, расположенный рядом с точкой.

Так что я использую jQuery .offset() внутри SVG.Он отлично работает в 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;
    }

FullКод

Вот мой codepen , чтобы увидеть полный код, любая помощь приветствуется

1 Ответ

0 голосов
/ 20 февраля 2019

Если бы jQuery была библиотекой, предназначенной для поддержки SVG, я бы назвал это ошибкой jQuery.Но это не так, поэтому они могут сказать, что это ошибка восходящего потока, которую Safari должен исправить.

Что происходит, эта часть кода jQuery: 

    // 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(), который для Safari возвращает пустой список, если элемент находится в пространстве имен SVG.

Способ обойти это - напрямую использовать оставшуюся часть кода.Вы знаете, что выбранные узлы являются частью документа, поэтому упомянутая ошибка не может произойти: 

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)
    };
}
...