javascript - 在 Bootstrap 弹出窗口中嵌入 SVG

Question

有没有办法在 Bootstrap 3 弹出窗口中嵌入 SVG？我可以让 HTML 在这样的弹出窗口中工作:

var myText = 'here is some text'

$('#my-element').popover({
  container: 'body',
  content: myText,
  placement: 'right',
  html: true
})

我真正想做的是以编程方式在函数内创建 SVG，如下所示:

$('#my-element').popover({
  container: 'body',
  content: function() {
    // add a new div, #my-popover-div,   
    // then build an svg here by appending
    // onto the newly created #my-popover-div
  }
  placement: 'right',
  html: true
})

是否可以在弹出框内创建 SVG？

Answer 1

您可以将 content 属性定义为返回字符串、DOM 节点或 jQuery 集合的函数。调用该函数时，返回值将附加到弹出元素。

来自Boostrap Popover options documentation :

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

在该函数中，您可以根据需要构建 SVG。在下面的示例中，我从字符串构造 SVG。您也可以为静态 SVG 返回 SVG 字符串，但返回 DOM 节点或 jQuery 集合的优点是您可以更轻松地动态创建 SVG 内容。

工作示例(Bootply):

$('#my-element').popover({
  container: 'body',
  content: function() {
    //Create our wrapper div (optional).
    var $el = $('<div id="#my-popover-div"></div>');
    //Create the SVG child (can be created more-dynamically).
    $el.append('<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" viewBox="0 0 467 462" style="display: block; width: 100%; height: 100%;">' + 
        '<rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />' + 
        '<rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />' + 
      '</svg>');
    //Return the jQuery collection.
    return $el;
  },
  placement: 'right',
  html: true
});

#my-element {
  margin: 150px;
  padding: 15px;
  border: solid 1px grey;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<button id="my-element">Click Me!</button>

截图: