如何点击外部SVG路径触发Bootstrap Popover弹出框？

你的思路方向是对的，但之前的代码有几个关键问题：一是Bootstrap Popover主要为HTML元素设计，直接绑定到SVG的<path>元素上可能无法正常渲染；二是你在点击事件里才初始化popover，时机不对，也没处理坐标转换的问题。下面是可以直接在主页面实现的可行方案：

核心思路 #

1. 等待SVG完全加载后，获取其内部文档对象
2. 给目标<path>绑定点击事件，在事件中计算点击位置相对于页面的坐标
3. 在主页面DOM中创建一个临时容器元素，将其定位到点击位置，再给这个容器初始化并显示Popover
4. 处理Popover的关闭逻辑，避免多个Popover同时存在

完整代码示例 #

<!-- 你的SVG Object标签 -->
<object data="test1.svg" id="svg" type="image/svg+xml" class="img-responsive"></object>

<!-- 确保已正确引入jQuery和Bootstrap的JS/CSS -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    // 等待SVG加载完成
    document.getElementById("svg").addEventListener("load", function() {
        const svgDoc = this.getSVGDocument();
        const targetPath = svgDoc.getElementById("path88");
        
        // 给目标path绑定点击事件
        targetPath.addEventListener("click", function(e) {
            // 移除之前可能残留的临时容器
            $("#popover-temp-container").remove();
            
            // 计算点击位置的页面绝对坐标
            const svgRect = document.getElementById("svg").getBoundingClientRect();
            const clickX = e.clientX - svgRect.left;
            const clickY = e.clientY - svgRect.top;
            
            // 创建隐藏的临时容器，定位到点击位置上方
            const tempContainer = $('<span id="popover-temp-container"></span>').css({
                position: 'absolute',
                left: `${svgRect.left + clickX}px`,
                top: `${svgRect.top + clickY - 30}px`, // 上移30px让Popover显示在点击位置上方
                visibility: 'hidden' // 只显示Popover，隐藏容器本身
            });
            
            // 将临时容器添加到页面
            $("body").append(tempContainer);
            
            // 初始化并手动触发Popover
            tempContainer.popover({
                title: "Header",
                content: "Blabla",
                placement: "top",
                trigger: "manual", // 手动控制显示/关闭，避免重复绑定
                html: false
            }).popover("show");
            
            // 点击页面其他区域时关闭并移除Popover
            $(document).one("click", function() {
                tempContainer.popover("hide").remove();
            });
            
            // 阻止事件冒泡，避免点击path时直接触发上面的关闭事件
            e.stopPropagation();
        });
    });
});
</script>

关键细节说明 #

• 临时容器的作用：SVG元素无法直接作为Bootstrap Popover的宿主，所以用一个隐藏的HTML元素作为载体，让Popover依附它渲染。
• 坐标计算：通过getBoundingClientRect()获取SVG在页面中的位置，结合点击事件的clientX/clientY转换为绝对坐标，确保Popover位置准确。
• 手动触发逻辑：设置trigger: "manual"可以避免重复绑定事件，同时我们能自主控制Popover的显示和关闭时机。
• 清理逻辑：使用$(document).one()绑定一次性点击事件，点击页面其他地方就移除临时容器，避免DOM冗余。

如果你的SVG存在缩放或viewBox适配的情况，可能需要额外通过SVG的currentScale属性调整坐标，但一般场景下上面的代码已经能解决问题。

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