我正在使用SVG文件中所有圈子上的彈出框.起初,一切似乎都工作正常,如果單擊cipop彈出框,那么它將出現(xiàn)在我希望其出現(xiàn)的位置.如果在pop popover已打開時滾動,則它會像應(yīng)該的那樣跟隨圓圈,并停留在正確的位置.但是,當(dāng)彈出窗口被隱藏并且在向下滾動后單擊它時,它將彈出窗口的位置設(shè)置得過高.

這是我們單擊圓圈而不滾動時的屏幕截圖：

這是一個屏幕截圖,當(dāng)我們向下滾動一點后單擊它時,該彈出窗口是如何定位自身的：

我的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中的最后兩行是放置彈出窗口的行.

問題出在哪里,我感覺這與“容器：’身體’”部分有關(guān).但是沒有這個,就不可能將這個彈出窗口放到我的svg元素上.

編輯：當(dāng)向右滾動時,會發(fā)生相同的事情,但是現(xiàn)在彈出窗口將自身放置在左側(cè)過多.

解決方法:

滾動后位置未刷新,我在Bootstrap和SVG中遇到了相同的問題. bootstrap.js中有一行,當(dāng)它是SVG元素時可以避免偏移.我已將零件注釋掉,并且現(xiàn)在運行良好.

這是您必須修改的部分：
原版的：

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

希望這可以幫助！