单击svg元素时添加下拉菜单
[英]Add Drop Down menu on clicking an svg element
问题描述
我正在为流程图生成器做前端，在其中使用SVG绘制元素。 我想单击一个SVG元素（特别是svg rect）以显示一个下拉菜单，其中显示“编辑”和“删除”。
单击“编辑”后，我希望它打开一个弹出表单以填充详细信息，以创建一个通过箭头连接的新矩形。 如何为svg元素设置点击事件，以及如何进一步包含下拉菜单？
我已经制作了形状和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 个解决方案
解决方案1
0 2019-07-17 06:48:20
您可以像其他任何元素一样监听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;
}
解决方案2
0 2019-07-17 07: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>
通过下拉菜单设置SVG元素的样式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.