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> 

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元素上。

編輯：當向右滾動同樣的事情發生，但現在彈出的地方自己放在左邊太多。

Answer 1

我無法用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.

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 

引導v3.3.7 的jQuery 2.1。3

希望這會有所幫助！

Answer 3

當頁面滾動時，我遇到了與SVG元素上的工具提示相同的問題。原來，問題已經在bootstrap 3.3.7中作爲issue 20381提出。這個變化發生在bootstrap 3.3.7中。在我的項目中回滾到3.3.6使得工具提示再次呈現在適當的位置。

實質上，爲解析20280所做的更改不會對SVG元素進行任何位置調整。因爲它看起來像引導維護者不會合並任何引入請求到3.x，我用一個小覆蓋文件，所以我仍然可以導入到引導通過NPM /紗/的WebPack我的項目：

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。