svg 在 bootstrap 5 popover 中不起作用

如何解决svg 在 bootstrap 5 popover 中不起作用

SVG 在弹出窗口中不起作用。请帮助我如何做到这一点。

我的 SVG 应该在 popover 和 carousel 中工作，但 SVG 不支持 popover

我有一个弹出框，带有一些特定文本的轮播，所以我需要在轮播内有一些 SVG

我添加了一个代码片段，所以它可能对你来说很容易，你可以看到 SVG 已加载到该 div 的控制台，但是当弹出窗口打开时它没有被附加

请帮他解决这个问题

$(function() {
  $('document').ready(function(){
      $('[data-toggle="popover"]').popover();
  });

  $('[data-bs-toggle="popover"]').popover({ 
      html: true,content: function() {
          $('#div3 svg').each(function(i) {  $('#slider2').append($('<div>').append($(this)).addClass('carousel-item').attr('id',`chord${i+1}`))
          });
          $el =  $('.popup').html();
          console.log($el);
          return $el;
      }
  });

  //----- CLOSE
  $('body').on('click',function (e) {
      $('[data-bs-toggle="popover"]').each(function () {
          if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
              $(this).popover('hide');
          }
      });
  });

  $('.carousel-inner').carousel(); 
});

.popup {
    display: none;
}

#div3 {
    display: none;
}

.popover-body {
  padding:0 !important;
}
.popup-inner {
    width: 170px;
    background: #fff;
}
.popup-close {
    top: 0;
    right: 0;
    color: #fff;
    width: 30px;
    height: 30px;
    font-size: 20px;
    padding-top: 4px;
    line-height: 15px;
    position: absolute;
    text-align: center;
    background: #afafaf;
    display: inline-block;
    border-radius: 1000px;
    border: 2px solid #fff;
    transition:ease 0.25s all;
    transform: translate(50%,-50%);
    font-family: Arial,Sans-Serif;
}

.popup-close:hover {
    color: #fff;
    background: #e72222;
    text-decoration: none;
    transform: translate(50%,-50%) rotate(180deg);
}
.pop-head,.pop-footer {
    border: 0;
    width: 100%;
    display: flex;
    padding: 10px 20px;
    align-items: center;
    background: #44769e;
    justify-content: center;
    border-radius: 8px 8px 0 0;
}
.pop-head:hover,.pop-footer:hover {
    color: #fff;
    background: #44769e;
}
.pop-head i {
    color: #fff;
    font-size: 20px;
}
.pop-footer {
    color: #fff;
    border-radius: 0 0 8px 8px;
}
.pop-footer i {
    font-size: 16px;
    margin-right: 5px;
}
.frame {
    padding: 20px 0 0;
    overflow: hidden;
    border-width: 0 2px;
    border-style: solid;
    border-color: #b1b1b1;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="mt-5">
    <a class="tag" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="click" data-bs-original-title="" title="">C</a>
  </div>
</div>

<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <a href="#" class="pop-head"><i class="fas fa-bars"></i></a>
        <div class="frame">
            <div id='carousel' class='carousel slide' data-bs-ride='carousel'> 
                <div class='carousel-inner' id="slider2">
                </div>
            </div>
        </div>
        <a href="#" class="pop-footer"><i class="fas fa-play"></i> Play</a>
        <a href="#" class="popup-close" data-popup-close="popup-1">x</a>
    </div>
</div>


<div id="div3">
  <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
  <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,255);stroke-width:3;stroke:rgb(0,0)" />
    </svg>
  <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
</div>

check the code here