Question

我正在使用SVG文件中所有圈子上的popover。一切似乎一切正常，如果你点击一个cirlce popover然后它出现在我希望它出现的地方。如果您在弹出窗口已经打开时滚动，那么它会跟随圆圈一样，并保持在正确的位置。但是当弹出窗口被隐藏并且在你向下滚动后单击它时它会使我的弹出窗口太高了。

以下是我们点击圆圈而不滚动的截图：

这是一个屏幕截图，当我们向下滚动一点后，当我们点击它时，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中。我还使用此函数将popover放置在其中包含圆圈的所有组中。

以下是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中的最后两行是弹出窗口的行。

哪里出错了，我觉得它与“容器：'身体'”部分有关。但是如果没有这个，就不可能将这个popover放在我的svg元素上。

编辑：向右滚动时会发生同样的事情，但现在弹出窗口会将其自身放在左侧。

Answer 1

我有与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

希望这有帮助！

Answer 2

滚动页面时，我遇到了与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。

Answer 3

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

我猜你的工具提示会在页面滚动时忽略window.scrollX和/或window.scrollY偏移量。但是我无法重现它。就我而言，我指定为container并不重要。（在Chrome，Firefox和Safari中测试）

I made a little JSFiddle you can find here.

也许你可以在那里发现一些东西。如果这没有帮助，也许您可以构建自己的工具提示。 Here's another small JSFiddle without Bootstrap, but simple tooltips.

当滚动页面时，svg元素上的Bootstrap popover会错误地重新定位

3 个答案: