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

您可以像其他任何元素一样收听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;
}

Answer 2

使用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元素时添加下拉菜单

2 个答案: