如何通过单击SVG元素打开模态窗口

我有一个复杂的SVG，它是一栋建筑的平面图。我想创建模式窗口或弹出窗口，提供建筑中不同房间的小说明

问题是：如何在单击SVG或SVG内部时添加boostrap模式（或其他弹出窗口）？我曾尝试在标记中添加模式代码，但似乎不起作用

     <rect   data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div id="section-h-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</foreignobject>

x
模态头
模态中的一些文本

接近

您使用了错误的标记来触发模态了解更多信息 外物 你的解决方案是

JQuery

$(function () {
 $('.btn-cta').click(function () {
  $('.overlay').addClass('is-open');
  return false;
 });

 $('.close-btn').click(function () {
  $('.overlay').removeClass('is-open');
 });
});

---

在大多数库中，例如bootstrap或materialize，您可以通过JavaScript代码打开模式对话框。因此，请阅读他们的示例，了解如何打开它

要允许svg元素上的单击事件，您必须知道每个svg元素都是普通的dom元素。这意味着，您可以像

p

标记或类似的东西一样访问它

例如，svg中有一个id为

circle01

的圆。要添加点击事件，您可以使用：

$("#circle01").click(function (e) { ... });

通过jQuery或

document.getElementById("circle01").onclick = function (e) { ... };

通过纯JavaScript

---

要理解svg的魔力，您必须知道它是纯html；）

这是一个本地测试站点，所以我不能展示它，但这里有一些相关代码：added avove

$("#circle01").click(function (e) { ... });

document.getElementById("circle01").onclick = function (e) { ... };