Bootstrap 带有来自文件的 SVG 元素的弹出框位置错误

Question

我正在尝试通过单击 svg 圆来显示 bootstrap 弹出窗口。 SVG 内容从文件加载：

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

现在我有两个问题：

1) 弹出框位置错误

2) 通过 "x" 按钮关闭后，弹出窗口仅在第二次单击按钮时再次显示

  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

为了正确定位弹出窗口，我使用 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);
}

自 v3.3.5 以来 bootstrap 中的错误导致的第二个问题： Tooltip/Popover methods show/hide/toggle don't work properly with click triggering

修复：

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
  })
}

Bootstrap 带有来自文件的 SVG 元素的弹出框位置错误

Bootstrap popover with SVG element from file is wrongly positioned

svg

twitter-bootstrap-tooltip