单击svg元素时添加下拉菜单
[英]Add Drop Down menu on clicking an svg element
问题描述
I'm making front-end for flow chart builder where in I am using SVG for drawing elements. 
我正在为流程图生成器做前端，在其中使用SVG绘制元素。 I want to click an SVG element (specifically, svg rect) to show a drop-down menu saying - "Edit" and "Delete". 我想单击一个SVG元素（特别是svg rect）以显示一个下拉菜单，其中显示“编辑”和“删除”。
On clicking Edit, I want it to open a pop-up form to fill details to create a new rectangle connecting via arrow. 单击“编辑”后，我希望它打开一个弹出表单以填充详细信息，以创建一个通过箭头连接的新矩形。 How to set on-click events for the svg elements and how to include the drop down menu further? 如何为svg元素设置点击事件，以及如何进一步包含下拉菜单？
I have already made the shape and svg elements. 我已经制作了形状和svg元素。 However, I am not able to set any on-click event onto that. 但是，我无法在其上设置任何单击事件。
<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>
Here is how it looks now: https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect2 这是现在的样子： https : //www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect2
I want this rectangle to be able to show two options to click on and then expand to form a new rectangle 我希望这个矩形能够显示两个选项，然后单击以展开以形成一个新的矩形
2 个解决方案
解决方案1
0 2019-07-17 06:48:20
You can listen to events on svg elements just like on any other: 您可以像其他任何元素一样监听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>
After clicking the element with id svg you should see message in console with an event object next to it. 单击ID为svg的元素后，您应该在控制台中看到消息，其旁边有一个事件对象。 That object does have properties that can be useful for you to display pop-up (eg. in event.target you have information about clicked element such as its positon). 该对象确实具有可用于显示弹出窗口的属性（例如，在event.target您具有有关被单击元素的信息，例如其位置）。
As far as pop-up is concerned you could go with creating a form in HTML and toggle its visibility with adding/removing CSS class: 就弹出窗口而言，您可以使用HTML创建表单并通过添加/删除CSS类来切换其可见性：
const svg = document.getElementById('svg');
const form = document.getElementById('form');
svg.addEventListener('click', event => {
form.classList.toggle('hidden');
});
.hidden {
display: none;
}
解决方案2
0 2019-07-17 07:07:22
Using jquery would be good. 使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.