svg自定义菜单的动态实现

31 篇文章 0 订阅
3 篇文章 0 订阅
svg自定义菜单的实现

svg也使用过几次了,但是仍不是太熟练。最近做项目遇到新的问题。用户希望右键我在svg上生成的圆,产生自己的菜单,左键点击进入对应的别的操作。即,也拓展原有的右键功能,同时保留之前的左键功能。

实现的具体思路,感谢强大的互联网,找到了几个有用的方案。第一步先做了静态菜单。

实现方式,num1:

 

在svg里面直接添加下列节点 

<defs> 	
    <menu id="defaultMenu">
	     <header>Adobe SVG Viewer</header>
	     <item action="Open" id="Open">打开(&amp;E)</item>
	     <item action="OpenNew" id="OpenNew">在新窗口中打开(&amp;N)</item>
	     <separator/>
	     <item action="ZoomIn" id="ZoomIn">放大显示(&amp;I)</item>
	     <item action="ZoomOut" id="ZoomOut">缩小显示(&amp;O)</item>
	     <item action="OriginalView" id="OriginalView">原始检视(&amp;W)</item>
	     <separator/>
	     <item action="Quality" id="Quality">较高品质(&amp;Q)</item>
	     <item action="Pause" id="Pause">暂停(&amp;P)</item>
	     <item action="Mute" id="Mute">静音(&amp;M)</item>
	     <separator/>
	     <item action="Find" id="Find">寻找(&amp;F)...</item>
	     <item action="FindAgain" id="FindAgain">再次寻找(&amp;A)</item>
	     <separator/>
	     <item action="Copy" id="Copy">复制选取的文字(&amp;C)</item>
	     <item action="CopySVG" id="CopySVG">复制 SVG(&amp;C)</item>
	     <item action="ViewSVG" id="ViewSVG">检视 SVG(&amp;G)</item>
	     <item action="ViewSource" id="ViewSource">检视原始码(&amp;V)</item>
	     <item action="SaveAs" id="SaveAs">另存 SVG(&amp;S)...</item>
	     <separator/>
	     <item action="Help" id="Help">帮助(&amp;H)</item>
	     <item action="About" id="About">关于 Adobe SVG Viewer(&amp;B)...</item>
   </menu>
   <menu id='myMenu'> /* 定义新菜单 */
     <header>Menu utilisateur</header>
     <item id='Menu0' onactivate="cc()">变色</item>
     <item id='Menu1' onactivate='cd1()'>菜单1</item>
      <item id='Menu2' onactivate='cd2(2)'>菜单2</item>
     <item id='none1'/>
     <item id='Menu3' action="ZoomOut">缩小</item>
     <item id='Menu4' action="ZoomIn">放大</item>
     <item id='none2'/>
     <item id='Menu5' action='ViewSource'>浏览源代码</item>
 </menu>
</defs>

    然后在该SVG中添加JS方法(建议直接添加在SVG中,因为这样可以方便调用svg内置的东西)。

 js方法要在svg定义的想替换位置添加。

function showMyMenu(alias,mn,evt)
	    { 
	      if(evt.button==2)
	       {
	          var menuId = document.getElementById(mn);
	          if(mn == "myMenu"){
	          	//根据相应的具体操作,操纵具体的对象
                  }
	       }
	       
	    }

 我这里为了控制这个Svg的菜单,所以,添加js控制在整个外层g上

<g οnmοusedοwn="showMyMenu('','defaultMenu',evt)">
      //其它页面内容
</g>

 

 

 

要在SVG元素上设置右键菜单,你可以使用以下步骤: 1. 创建一个右键菜单元素。使用SVG的`<g>`元素或者其他适合你的需求的元素来创建一个右键菜单容器。 ```html <svg> <g id="contextMenu" style="display: none;"> <!-- 在这里添加右键菜单的选项 --> </g> <!-- 在这里添加其他的SVG元素 --> </svg> ``` 2. 监听右键点击事件。使用SVG的`oncontextmenu`事件监听右键点击事件,并阻止默认的右键菜单显示。 ```javascript var svg = document.querySelector('svg'); svg.oncontextmenu = function(event) { event.preventDefault(); // 在这里显示自定义的右键菜单 var contextMenu = document.getElementById('contextMenu'); contextMenu.style.display = 'block'; contextMenu.style.left = event.pageX + 'px'; contextMenu.style.top = event.pageY + 'px'; } ``` 3. 添加右键菜单选项。在右键菜单容器中添加所需的选项,可以使用SVG的`<rect>`、`<text>`和其他元素来创建菜单选项。 ```html <svg> <g id="contextMenu" style="display: none;"> <rect x="0" y="0" width="100" height="30" fill="gray"></rect> <text x="10" y="20" fill="white">菜单选项1</text> <!-- 添加其他的菜单选项 --> </g> <!-- 在这里添加其他的SVG元素 --> </svg> ``` 4. 监听点击事件以隐藏右键菜单。当用户点击菜单选项或者点击其他地方时,隐藏右键菜单。 ```javascript document.addEventListener('click', function(event) { var contextMenu = document.getElementById('contextMenu'); contextMenu.style.display = 'none'; }); ``` 这样就可以在SVG元素上设置一个简单的右键菜单了。你可以根据需要进行进一步的样式和功能定制。请注意,以上代码仅为示例,具体实现可能需要根据你的应用程序进行适当调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值