两个文件放在同一目录
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
svg主文件
tt.svg
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"
http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="600" height="400">
<script type="text/ecmascript">
<![CDATA[
getURL("yy.xml", fileLoaded);
function fileLoaded (data) {
var msg = '';
if(data.success) {
var newMenuRoot=parseXML(data.content,contextMenu);
contextMenu.replaceChild(newMenuRoot,contextMenu.getDocumentElement());
}
}
var target;
function onmousedown(evt){
if(evt.button==2) target=evt.getTarget();
}
function showAlert(evt){
if(target!=null)
{
alert(target.getAttribute("id"));
}
target=null;
}
]]> </script>
<g onmousedown="onmousedown(evt)">
<rect id="a" x="2cm" y="1cm" width="6cm" height="3cm" fill="green" stroke="blue" stroke-width="5"/>
<text id="b" x="5cm" y="5cm" style="font-family:Verdana; font-size:16pt; fill:blue">
Hello, SVGViewer!
</text>
</g>
</svg>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
定义右建菜单的xml文件
yy.xml
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?xml version="1.0" encoding="UTF-8"?>
<menu id="myCustomMenu">
<item action="ZoomIn" id="ZoomIn">ZoomIn</item>
<item action="ZoomOut" id="ZoomOut">ZoomOut</item>
<item action="OriginalView" id="OriginalView">OriginalView</item>
<separator/>
<item action="Find" id="Find">Find</item>
<item action="Copy" id="Copy">Copy</item>
<separator/>
<item onactivate="showAlert(evt)">ShowAlert</item>
</menu>
或
<svg>
<defs>
<menu id='menu1' >
<header>Menu utilisateur</header>
<item id='Menu1.1' onactivate='Toto()'>工作1</item>
<item id='Menu1.2' onactivate='Titi(2)'>工作2</item>
<item id='Menu2.0'/>
<item id='Menu2.1' action="ZoomIn"> 缩小 </item>
<item id='Menu2.2' action='ViewSource'>浏览源代码</item>
</menu>
</defs>
<script>
<![CDATA[
var svgdoc = evt.getTarget().getOwnerDocument();
var newMenuRoot=parseXML(printNode(svgdoc.getElementById('menu1')),contextMenu);
contextMenu.replaceChild(newMenuRoot,contextMenu.firstChild);
function Toto()
{
alert('你点的是工作1')
}
function Titi(strParam)
{
alert('你点的是工作2，而且还传递了一个参数： ' + strParam)
}
]]>
</script>
</svg>