Вставить SVG в загрузочный popover

Есть ли способ встраивать SVG в Popup 3 Popover? Я могу заставить 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 внутри popover?

Ответ 1

Вы можете определить свойство content как функцию, которая возвращает строку, DOM node или коллекцию jQuery. Когда функция вызывается, возвращаемое значение будет добавлено к элементу popover.

Из Документация опций Boostrap Popover:

Если задана функция, она будет вызываться с ее ссылкой this на элемент, к которому прикреплен popover.

Внутри этой функции вы можете построить SVG, как вам нравится. В следующем примере я строю SVG из строки. Вы можете поочередно возвращать строку SVG для статического SVG, но преимущество возврата коллекции DOM node или 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>

Ответ 2

Вам нужно использовать свойство html. В моем примере ниже я использую кнопку с кругом svg внутри popover.

Здесь jsfiddle

HTML

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

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

    });
});

Ответ 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\ some amazing content. It\ 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\ some amazing content. It\ 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/