將SVGsprite中的圖示添加到Bootstrap彈出框-有解無憂

我需要在彈出視窗中插入一個 SVG 圖示。我這樣做（見下面的代碼）。我究竟做錯了什么？selectpicker 也有類似的問題，但是通過將 svg 標簽添加到“白名單”中，一切都得到了解決。請告訴我如何解決這個問題。

let $popover = $('#popover_btn');

$(function() {
  $popover.popover({
    html: true,
    template: `<div >
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
          <path d="M28 11.094V23.5C28 24.875 26.875 26 25.5 26H2.50002C1.83755 25.9982 1.20274 25.7342 0.734297 25.2657C0.265856 24.7973 0.00187062 24.1625 2.34375e-05 23.5V11.094C0.469023 11.61 1.00002 12.063 1.57802 12.453C4.17202 14.219 6.79702 15.984 9.34402 17.844C10.657 18.813 12.282 20 13.985 20H14.016C15.719 20 17.344 18.812 18.657 17.844C21.204 16 23.829 14.219 26.438 12.453C27.0081 12.0598 27.5324 11.6039 28.001 11.094H28ZM28 6.50002C28 8.25002 26.703 9.82802 25.328 10.781C22.89 12.468 20.437 14.156 18.015 15.859C16.999 16.562 15.281 18 14.015 18H13.984C12.718 18 11 16.563 9.98402 15.859C7.56202 14.156 5.10902 12.468 2.68702 10.781C1.57802 10.031 -0.000976562 8.26502 -0.000976562 6.84302C-0.000976562 5.31202 0.827023 3.99902 2.49902 3.99902H25.499C26.858 3.99902 27.999 5.12402 27.999 6.49902L28 6.50002Z" fill="black"/>
          </g>
  <defs>
  <clipPath id="clip0">
  <rect width="28" height="28" fill="white"/>
  </clipPath>
  </defs>
  </svg>

      <div >Some text</div>
    </div>`
  })
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<button id="popover_btn" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

沙盒在這里。

PS在示例中它只是SVG，因為精靈不是從外部資源顯示的，但我不知道如何在這里上傳檔案。

uj5u.com熱心網友回復：

我實際上認為引導程式過濾了它允許在彈出視窗中呈現的 HTML。您可以通過在顯示彈出視窗后觸發事件來解決這個問題。

$popover.on('shown.bs.popover', function() {
  // Add svg here
});

我已經在這里調整了你的腳本：https ://codepen.io/familjenpersson/pen/QWxyaYy

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526682.html

標籤：javascriptjQuerysvg引导程序 4弹出框

上一篇：使用JavaScript操作SVG影像中的路徑標簽？

下一篇：可滾動的svg內容