svg自定义菜单的动态实现

2013-02-21

字数统计: 814字 | 阅读时长: 4分

阅读量

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上

1
2
3

<g onmousedown="showMyMenu('','defaultMenu',evt)">
    //其它页面内容
</g>