在引导程序弹出窗口中嵌入SVG

Question

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

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集合的函数.调用该函数时,返回值将附加到popover元素.

从Boostrap Popover选项文档:

如果给出了一个函数,它将被调用,其this引用设置为连接到popover的元素.

在该函数内部,您可以根据需要构建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>

截图: