Bootstrap popover с элементом SVG из файла неправильно расположен

Question

Я пытаюсь показать загрузочный popover, щелкнув по кругу svg. содержание SVG загружается из файла:

<object type="image/svg+xml" id="svgobj" data="test.svg"></object> 

Теперь у меня есть 2 вопроса:

1) Неправильное положение пирог

2) После закрытия на «х» кнопку А поповер еще раз показывает, только на вторая кнопка мыши

var svg = document.getElementById("svgobj"); 
    var svgDoc = svg.contentDocument; 
    var circle = $(svgDoc.getElementById("circle")); 
    var opts = { 
    title: '<span class="text-info">Title</span><button type="button" id="close" class="close" onclick="$(&quot;.popover&quot;).popover(&quot;hide&quot;);">&times;</button>', 
    html: true, 
    content: 'Content', 
    trigger: 'click', 
    placement: 'auto', 
    container: 'body' 
    }; 

    circle.popover(opts); 

Plunker здесь http://plnkr.co/edit/HwQhJEGSZIf8f6JxilEI?p=preview

Answer 1

в о rder для правильного позиционирования пирог я использовал d3.js загрузить SVG из файла:

svg = d3.select("#svgplace") 
.append('svg:svg') 
.attr('width', "600px") 
.attr('height', "600px") 

d3.xml("test.svg", "image/svg+xml", function (error, xml) { 
    if (error) throw error; 
    var importedNode = document.importNode(xml.documentElement, true); 
    var clone = importedNode.cloneNode(true); 
    document.querySelector("svg").appendChild(clone); 
} 

2-й вопрос, вызванная ошибкой в ​​загрузчике, так v3.3.5: Tooltip/Popover methods show/hide/toggle don't work properly with click triggering

Fix:

if ($.fn.popover.Constructor.VERSION == "3.3.5" || $.fn.popover.Constructor.VERSION == "3.3.6") { 
    $('[data-toggle="popover"]').on("hidden.bs.popover", function() { 
    $(this).data("bs.popover").inState.click = false 
    }) 
}