滚动页面时,svg元素上的Bootstrap popover自身位置错误

我正在使用SVG文件中所有圈子上的弹出框.起初,一切似乎都工作正常,如果单击cipop弹出框,那么它将出现在我希望其出现的位置.如果在pop popover已打开时滚动,则它会像应该的那样跟随圆圈,并停留在正确的位置.但是,当弹出窗口被隐藏并且在向下滚动后单击它时,它将弹出窗口的位置设置得过高.

这是我们单击圆圈而不滚动时的屏幕截图：

这是一个屏幕截图,当我们向下滚动一点后单击它时,该弹出窗口是如何定位自身的：

我的SVG文件如下所示(省略了一些图层,因此不会太长)：

<svg id="svg3336" xmlns="http://www./2000/svg" height="542" viewBox="0 0 800 542" width="800" version="1.1" xmlns:xlink="http://www./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>

svg在d3的帮助下在我的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中的最后两行是放置弹出窗口的行.

问题出在哪里,我感觉这与“容器：’身体’”部分有关.但是没有这个,就不可能将这个弹出窗口放到我的svg元素上.

编辑：当向右滚动时,会发生相同的事情,但是现在弹出窗口将自身放置在左侧过多.

解决方法:

滚动后位置未刷新,我在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

希望这可以帮助！