svg自定义菜单的动态兑现

svg自定义菜单的动态实现
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 onmousedown="showMyMenu('','defaultMenu',evt)">      //其它页面内容</g>

?

?

?