如何将SVG sprite图标嵌入Bootstrap Popover？

问题背景 #

尝试在Bootstrap 4 Popover中嵌入SVG图标但未显示，此前在selectpicker组件中通过将SVG标签加入白名单解决过类似HTML过滤问题，需要适配Popover的解决方案。

解决方案 #

Bootstrap Popover默认会对HTML内容进行sanitize（清理），SVG相关标签和属性不在默认白名单内，因此需要手动扩展白名单，同时修正模板字符串的转义问题：

1. 扩展Popover的HTML白名单 #

在初始化Popover时，指定sanitize: true，并通过whiteList添加SVG、path、g、defs、clipPath等标签，以及对应的属性（如width、height、viewBox、fill、clip-path、xmlns等）。

2. 修正模板字符串的转义错误 #

模板字符串中无需对HTML标签进行转义（原代码中的<改为<），否则会被当作文本渲染而非HTML元素。

修改后的完整代码 #

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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">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/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

JavaScript代码 #

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

$(function() {
  $popover.popover({
    html: true,
    sanitize: true,
    whiteList: {
      // 保留Bootstrap默认白名单，添加SVG相关标签
      ...$.fn.popover.Constructor.Default.whiteList,
      svg: ['width', 'height', 'viewBox', 'fill', 'xmlns'],
      g: ['clip-path'],
      path: ['d', 'fill'],
      defs: [],
      clipPath: ['id'],
      rect: ['width', 'height', 'fill']
    },
    template: `<div class="popover_content">
        <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 class="text">Some text</div>
    </div>`
  })
})

说明 #

• 通过扩展whiteList，允许Popover渲染SVG及其相关子标签和属性，避免被sanitize机制过滤。
• 模板字符串直接使用原生HTML标签，无需转义，确保SVG被正确解析为DOM元素。

内容的提问来源于stack exchange，提问作者Igor Merdich