页面滚动时，基于SVG元素的Bootstrap弹出框重新定位错误。

Question

我正在处理SVG文件中所有圆形的弹出窗口。一切似乎一开始都很正常，如果您单击一个圆形弹出窗口，则它会出现在我想要的位置。如果您在弹出窗口已经打开时滚动，则它会像应该的那样跟随圆圈并保持在正确的位置。但是，当弹出窗口被隐藏并且您在向下滚动后单击它时，它会将我的弹出窗口放置得太高。以下是点击未滚动的圆形时的屏幕截图：

这里是一个屏幕截图，当我们在向下滚动一点后单击它时，弹出框的位置如下所示： 我的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元素上。

编辑：当向右滚动时，同样的事情发生了，但现在弹出框的位置太靠左了。

- HeadachePanda

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))

它也可以作为 gist使用。

- sjd78

---

我从未如此用力地点击过赞。谢谢你。 - Ron Newcomb

Answer 2

我遇到了与Bootstrap和SVG相关的同样问题，滚动后位置没有刷新。在bootstrap.js中有一行代码可以避免SVG元素的偏移量。我已经将其注释掉，并且现在它运行良好。

这是您需要修改的部分： 原始内容：

var isSvg = window.SVGElement && el instanceof window.SVGElement

修改后，始终为false:

var isSvg = false;//window.SVGElement && el instanceof window.SVGElement

Bootstrap v3.3.7

jQuery v2.1.3

希望这能帮到你！

- Daniel

Answer 3

我无法使用Bootstrap的popover重现您的问题。

我猜测您的工具提示在页面滚动时忽略了window.scrollX和/或window.scrollY偏移量。但是我无法重现它。在我的情况下，无论我指定什么作为container都没有关系。（在Chrome、Firefox和Safari中测试过）

我制作了一个小的JSFiddle，您可以在这里找到它。

也许您可以在那里发现一些东西。如果这没有帮助，也许您可以构建自己的工具提示。这是另一个没有Bootstrap但有简单工具提示的小JSFiddle。

- b2m9