單擊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.