javascript - 单击 svg 元素时添加下拉菜单

Question

我正在为流程图生成器制作前端，其中我使用 SVG 绘制元素。我想单击一个 SVG 元素(特别是 svg rect)以显示一个下拉菜单，上面写着 -“编辑”和“删除”。

单击“编辑”时，我希望它打开一个弹出窗体以填写详细信息以创建一个通过箭头连接的新矩形。如何为 svg 元素设置点击事件以及如何进一步包含下拉菜单？

我已经制作了 shape 和 svg 元素。但是，我无法为其设置任何点击事件。

<svg width="400" height="180">
 <rect x="60" y="40" width="150" height="50" 
style="fill:white;stroke:rgb(51,23,163);stroke-width:3;fill- 
opacity:0.1;stroke-opacity:0.9" />
 <text x="85" y="61" font-family="Calibri" font-size="14" 
fill="black">Click to edit first</text>
 <text x="92" y="77" font-family="Calibri" font-size="14" 
fill="black">decision node</text>
</svg>

现在是这样的:https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect2

我希望这个矩形能够显示两个选项以供点击然后展开以形成一个新的矩形

Answer 1

使用 jquery 会很好。

$('.clickMe').on('click', function(){
alert('clicked');

// add your pop up form
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="400" height="180">
 <rect class="clickMe" x="60" y="40" width="150" height="50" 
style="fill:white;stroke:rgb(51,23,163);stroke-width:3;fill- 
opacity:0.1;stroke-opacity:0.9" />
 <text class="clickMe" x="85" y="61" font-family="Calibri" font-size="14" 
fill="black">Click to edit first</text>
 <text class="clickMe" x="92" y="77" font-family="Calibri" font-size="14" 
fill="black">decision node</text>
</svg>