替换SVG Viewer的主菜单

替换SVG Viewer的主菜单。

这个例子中，当在矩形、圆形、文本上右击时，根据不同的图元，显示不同的菜单（在文本上右击时，不显示菜单，在背景上右击显示原始的菜单）。代码在Adobe SVG Viewer 3.03 + IE6下测试通过。

 

首先在一个xml文件中定义好菜单，文件名Menu.xml

<?xml version="1.0" encoding="UTF-8"?> <menuDefine> <menu id="mn_null"> <header>空菜单（没有item项）</header> </menu> <menu id="mn_Rect"> <header>矩形图元菜单</header> <item id="mn_Rect1" onactivate="RectMenuItemCl()">矩形图元菜单1</item> <item id="mn_Rect2" onactivate="RectMenuItemCl()">矩形图元菜单2</item> <item id="mn_Rect3" onactivate="RectMenuItemClk()">矩形图元菜单3</item> </menu> <menu id="mn_Circle"> <header>圆形图元菜单</header> <item id="mn_Circl1" onactivate="CircleMenuItemClk()">圆形图元菜单1</item> </menu> </menuDefine> 

 

当在矩形上右击时，显示上面定义为<menu id="mn_Rect">的菜单，当在圆形上右击时，显示上面定义为<menu id="mn_Circle">的菜单，当在文本上右击时，不显示右键菜单，当在背景上右击时，显示原来的菜单。

代码如下：

<?xml version="1.0" encoding="utf-8" standalone="no" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" οnlοad="init(evt)" οnmοusedοwn="MouseDown(evt)"> <defs id="MainDefs"></defs> <mce:script type="text/javascript"><!-- var svgDoc = null ; var svgRoot = null ; var oriMenu = null ; //原始菜单 function init(evt) { svgDoc = evt.target.ownerDocument ; svgRoot = svgDoc.documentElement ; oriMenu = contextMenu.firstChild ; getURL("Menu.xml", menuLoaded) ; //载入菜单 } //菜单载入完成时 function menuLoaded(data) { if(data.success) { var menus = parseXML(data.content, document); document.getElementById("MainDefs").appendChild(menus.firstChild) ; //将菜单加入定义块中 } } //设置右键菜单,idMenu值是xml中，menu项目的id,若idMenu为null,则使用原来的菜单 function setMenu(idMenu) { if(idMenu) //根据idMenu设置相应的菜单 { var mnNode = document.getElementById(idMenu) ; if(mnNode == null) return ; var newMenuRoot = parseXML(printNode(mnNode), contextMenu); contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild) ; } else contextMenu.replaceChild(oriMenu, contextMenu.firstChild) ; //否则就设置为原来的菜单 } function MouseDown(evt) { var id = '' ; var idMenu = null ; if(evt.button == 2) { id = evt.target.id ; if(id == 'rect') idMenu = 'mn_Rect' ; else if(id == 'circle') idMenu = 'mn_Circle' ; else if(id == 'text') idMenu = 'mn_null' ; setMenu(idMenu) ; } } function RectMenuItemCl() { alert('矩形菜单项') ; } function CircleMenuItemClk() { alert('圆形菜单项') ; } // --></mce:script> <rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" /> <rect id="rect" x="50" y="50" width="100" height="100" fill="green" /> <circle id="circle" cx="220" cy="50" r="50" fill="blue" /> <text font-family="SimSun" font-size="12" fill="#FFFFFF" x="350" y="50" id="text">文本上不要右键菜单</text> </svg> 

 

 

效果图：