Bootstrap-Popover mit SVG-Element aus Datei ist falsch positioniert

Ich versuche Bootstrap Popover durch Klicken auf Svg Kreis zeigen. SVG-Inhalt aus der Datei geladen wird:Bootstrap-Popover mit SVG-Element aus Datei ist falsch positioniert

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

Jetzt habe ich 2 Fragen:

1) Falsche Position eines popover

2) Nach dem Schließen von "x" Taste ein popover zeigt wieder nur auf zweite Schaltfläche klicken

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 hier ist http://plnkr.co/edit/HwQhJEGSZIf8f6JxilEI?p=preview

Quelle

2016-04-11 Browen

Sehr ähnlich http://stackoverflow.com/questions/36515685/getboundingclientrect-coordinates-vs-svg?noredirect=1#comment60684879_36515685 - Sie brauchen, um die SVG-Koordinaten (mit Zoom) zum Browser-Fenster Koordinaten übersetzen (mit Browser Zoom und Fenster Scroll), was bedeutet f Ausrechnen des Offset des Kreises in Bezug auf SVG und SVG Offset in Bezug auf den Browser und den Bildschirm. –

In o rder auf die richtige Positionierung eines popover habe ich d3.js verwendet SVG aus einer Datei zu laden:

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-nd Ausgabe vom Bug in Bootstrap seit v3.3.5 verursacht: 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 
    }) 
}

Quelle

2016-04-13 07:38:08 Browen

Bootstrap-Popover mit SVG-Element aus Datei ist falsch positioniert

Antwort

Verwandte Themen