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

Question

有没有办法在Bootstrap 3 popover中嵌入SVG？我可以在这样的popover中使用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：

  

如果给出了一个函数，它将被调用，其this引用设置为附加popover的元素。

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

工作示例（Bootply）：

＆＃13;

＆＃13;

$('#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
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

截图：

Answer 2

您需要使用html属性。在下面的例子中，我在弹出框中使用了一个带有圆圈svg的按钮。

Here's the jsfiddle

HTML

<button type="button" class="btn btn-primary" >Popover</button>

JS

$('button').each(function () {
    $(this).popover({
        html: true,
        placement: "bottom",
        content: function() {
            //you can create the div before and then append the svg. I'm doing all at once.
var content = '<div id="#my-popover-div"><svg width="50" height="50"><circle r="20" cx="25" cy="25" style="fill: blue"/></svg></div>';
            return content;
        }

    });
});

Answer 3

第一个例子 您的HTML

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover">Dismissible popover</a>

您的Javascript

var text = 'And here\'s some amazing content. It\'s very engaging. Right? An SVG image is added to my popover!';
var svg = '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>Sorry, your browser does not support inline SVG.</svg>';
$('a').popover({
    container: 'body',
    content: function () {
       return text+svg;
    },
    placement: 'right',
    html: true
});

<强> FIDDLE http://jsfiddle.net/fuj4xxx0/

第二个例子

<强> HTML

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover">Dismissible popover</a>

<强>的Javascript

var text = 'And here\'s some amazing content. It\'s very engaging. Right? An SVG image is added to my popover!';
var svg = '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>Sorry, your browser does not support inline SVG.</svg>';
$('a').popover({
    container: 'body',
    content: function () {
        var mysvgdiv=$('<div id="svg_id" style="border:1px solid red;padding:5px"></div>');
       return mysvgdiv.prepend(text).append(svg);
    },
    placement: 'right',
    html: true
});

<强> FIDDLE http://jsfiddle.net/fuj4xxx0/3/