svg自定义菜单的动态实现

2013/02/21 问题一箩筐

svg自定义菜单的实现
svg也使用过几次了,但是仍不是太熟练。最近做项目遇到新的问题。用户希望右键我在svg上生成的圆,产生自己的菜单,左键点击进入对应的别的操作。即,也拓展原有的右键功能,同时保留之前的左键功能。 实现的具体思路,感谢强大的互联网,找到了几个有用的方案。
第一步先做了静态菜单。
实现方式 在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 onmousedown="showMyMenu('','defaultMenu',evt)">
    //其它页面内容
</g>

Search

    欢迎关注我的微信公众号

    Yannis的程序人生

    Table of Contents