单击svg元素时添加下拉菜单
我制作了流程图构建器的前端，其中我使用SVG来绘制元素。我想要单击一个SVG元素(特别是svg rect)来显示一个下拉菜单，上面写着- "Edit“和"Delete”。
单击编辑时，我希望它打开一个弹出式表单来填充详细信息，以创建一个通过箭头连接的新矩形。如何为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
我希望这个矩形能够显示两个选项，然后单击并展开以形成一个新的矩形
回答 2
Stack Overflow用户
发布于 2019-07-17 14:48:21
您可以在svg元素上侦听事件，就像在任何其他元素上一样：
const svg = document.getElementById('svg');
svg.addEventListener('click', () => {console.log('clicked')});<!DOCTYPE html>
<html>
<body>
<svg id='svg' width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
Sorry, your browser does not support inline SVG.
</svg>
<script>
const svg = document.getElementById('svg');
svg.addEventListener('click', event => {console.log('clicked', event)});
</script>
</body>
</html>
在单击id为svg的元素之后，您应该会在控制台中看到消息，旁边还有一个事件对象。该对象确实具有可用于显示弹出窗口的属性(例如，在event.target中，您可以获得有关所单击元素的信息，例如其位置)。
就弹出窗口而言，您可以在HTML中创建表单，并通过添加/删除CSS类来切换其可见性：
const svg = document.getElementById('svg');
const form = document.getElementById('form');
svg.addEventListener('click', event => {
form.classList.toggle('hidden');
});.hidden {
display: none;
}Stack Overflow用户
发布于 2019-07-17 15:07:22
使用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>
https://stackoverflow.com/questions/57069935
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号