javascript - 滚动页面时，svg 元素上的 Bootstrap 弹出窗口会错误地重新定位自身

Question

我正在我的 SVG 文件中的所有圆圈上使用弹出窗口。一开始一切似乎都很好，如果你点击一个 cirlce popover 然后它出现在我想要它出现的地方。如果你在 te popover 已经打开时滚动，那么它会像它应该的那样跟随圆圈并停留在正确的位置。但是，当弹出窗口被隐藏并且您在向下滚动后单击它时，它会将我的弹出窗口放在太高的位置。

这是我们点击圆圈而不滚动时的截图:

这是一个屏幕截图，当我们向下滚动一点后单击弹出窗口时，弹出窗口如何定位自己:

我的 SVG 文件看起来像这样(留下了一些层，这样它就不会变得不必要的长):

<svg id="svg3336" xmlns="http://www.w3.org/2000/svg" height="542" viewBox="0 0 800 542" width="800" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"  >
<g id="zeemanGroep" fill="#d40000" class="bluetooth">
        <circle id="zeeman" r="0" cy="95.064" cx="111.3" fill-opacity="0.5" />
        <text id="zeemantext" y="95.064" x="111.3" text-anchor="middle" stroke="#000000" stroke-width="2px" dy=".3em" ></text>
</g>

<g id="mediamarktGroep" fill="#d40000" class="jpurse" >
    <circle id="mediamarkt" r="0" cy="383.65" cx="568.57" fill-opacity="0.5"/>
    <text id="mediamarkttext" y="383.65" x="568.57" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>


<g id="blokkerGroep" fill="#d40000" class="wifi" >
    <circle id="blokker" r="0" cy="135.8" cx="542.18" fill-opacity="0.5"/>
    <text id="blokkertext" y="135.8" x="542.18" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>
<g id="popupGroep" fill="#d40000" class="wifi" >
    <circle id="popup" r="0" cy="106.54" cx="689.62" fill-opacity="0.5"  />
    <text id="popuptext" y="106.54" x="689.62" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em"></text>
</g>

在 d3 的帮助下，svg 被加载到我的 html 中的一个 div 中。我还使用此功能在所有内部有圆圈的组上放置一个弹出框。

这是 javascript 代码的一部分:

d3.xml("images/FloorplanScanners.svg", function (error, xml) {
if (error)
    throw error;
var importedNode = document.importNode(xml.documentElement, true);
var clone = importedNode.cloneNode(true);
document.querySelector("svg").appendChild(clone);

var circles = document.getElementsByTagName("circle");
console.log(circles);
for (i = 0; i < circles.length; i++)
{
    var circle = circles[i];
    var group = circle.parentElement;
    var titel = circle.id;
    var content = berekenPopovercontent(circle);
    d3.select(group).each(function(){
    $(this).popover({title:titel, content: content, container:"body", html:true});  
});
}});

我的 javascript 中的最后两行是放置弹出窗口的行。

哪里出错了，感觉跟“container:'body'”部分有关系。但是没有这个就不可能把这个弹出窗口放在我的 svg 元素上。

编辑:当向右滚动时会发生同样的事情，但现在弹出窗口将自己放在左边太多。

Answer 1

当页面滚动时，我在 SVG 元素上遇到了同样的工具提示问题。事实证明，问题已在 bootstrap 3.3.7 中作为 issue 20381 提出。 .更改发生在 bootstrap 3.3.7 中。在我的元素中回滚到 3.3.6 使工具提示再次呈现在正确的位置。

本质上，为解析 20280 所做的更改不会对 SVG 元素进行任何位置调整。由于 bootstrap 维护者似乎不会将任何拉取请求合并到 3.x，我正在使用一个小的覆盖文件，因此我仍然可以通过 npm/yarn/webpack 将 bootstrap 导入我的元素:

import jQuery from 'jquery/dist/jquery'

/*
 * Override the bootstrap 3.3.7 Tooltip.getPosition() function to fix
 * position issues with SVG elements when the page/viewport is scrolled.
 */
;(function ($) {
  const extension = {
    getPosition: function ($element) {
      $element = $element || this.$element

      var el = $element[0]
      var isBody = el.tagName === 'BODY'

      var elRect = el.getBoundingClientRect()
      if (elRect.width == null) {
        // width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093
        elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
      }

      var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
      var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null

      /*
       * Avoid using $.offset() since it gives incorrect results on SVG elements. Directly compute scroll
       * adjusted position like $.offset() and angular-ui-bootstrap's $position.offset() does.
       *
       * See issues: https://github.com/twbs/bootstrap/issues/20280
       *             https://github.com/twbs/bootstrap/issues/20381
       *             https://github.com/twbs/bootstrap/issues/21855
       */
      var elOffset = isBody
        ? { top: 0, left: 0 }
        : { top: elRect.top + (window.pageYOffset || document.documentElement.scrollTop),
            left: elRect.left + (window.pageXOffset || document.documentElement.scrollLeft) }

      return $.extend({}, elRect, scroll, outerDims, elOffset)
    }
  }

  $.extend(true, $.fn.tooltip.Constructor.prototype, extension)
}(jQuery))

也可用as a gist .