在 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 属性定义为 return 字符串、DOM 节点或 jQuery 集合的函数。调用该函数时，return 值将附加到 popover 元素。

来自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。您可以选择 return 静态 SVG 的 SVG 字符串，但是 returning 一个 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>

截图：

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/

在 bootstrap 弹出窗口中嵌入 SVG

Embed an SVG in a bootstrap popover

javascript

jquery

svg

twitter-bootstrap

来自Boostrap Popover options documentation：

工作示例（Bootply）：

截图：