svg实现右键自定义菜单-CSDN博客

svg实现右键自定义菜单例子。具体看例子即可

svgmenu.htm
1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2

<html>
3

<head>
4

<title></title>
5

</head>
10

<body onload="winLoad()">
11

<table border=1 width=100% height=100% border=0>
12

<tr>
13

<td bgcolor=#ff0000>
14

</td>
16

</tr>
17

</table>
18

</body>
19

</html>

svgmenu.svg
1

<?xml version="1.0" encoding="utf-8" ?>
2

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
4

xml:space="preserve" preserveAspectRatio="none" style="Z-INDEX: 1;">
5

<defs>
7

<![CDATA[
9

.infomation {
10

font-weight:normal;
11

font-size:200px;}
12

.cursorMove{ cursor:move; }
13

.cursorAuto{ cursor:auto; }
14

]]>
15

</style>
16

<menu id='menu1'>
17

<header>Menu utilisateur</header>
18

<item action="CopySVG" id="CopySVG">复制图形</item>
19

<separator/>
20

<menu>
21

<header>背景颜色</header>
22

<item onactivate="colorit('white')">白色</item>
23

<item onactivate="colorit('black')">黑色</item>
24

<item onactivate="colorit('#D0D063')">黄色</item>
25

<item onactivate="colorit('green')">绿色</item>
26

<separator/>
27

<item onactivate="colorit('#008083')">默认</item>
28

</menu>
29

<separator/>
30

<item action="Pause" id="Pause">暂停</item>
31

<separator/>
32

<item id='Menu1.2' onactivate='printit(this)'>打印</item>
33

<separator/>
34

<item id='Menu1.1' onactivate='Titi()'>操作说明</item>
35

</menu>
36

<menu id='menu2'>
37

<item id='Menu1.2' onactivate="showmsg('控件ID')">控件ID</item>
38

</menu>
39

</defs>
40

<g id="elements">
41

<rect id="rect_back" class="Gas" x="0" y="0" width ="45000" height="32920" fill="#ffff33">
42

</rect>
43

<rect id="gas_1" class="Gas" x="14260" y="17360" width ="1450" height="1450" fill="#00ff33" onmouseover="faireMenus('menu2')" onmouseout="faireMenus('menu1')">
44

</rect>
45

</g>
46

</svg>
47

svgmenu.js
1

var CurveControl = null;
2

var SvgMainMapDoc = null;
3

function winLoad()

{
5

CurveControl = document.getElementById('NavigateControl');
6

if(CurveControl==null)
7

return;
8

SvgMainMapDoc = CurveControl.getSVGDocument();
9

faireMenus("menu1");
11

}
12

//document.onload = winLoad;
13

//*******************************************************************************************************
15

/**//* 自定义右键菜单
16

/* hetonghai 2007-03-22
17

//*******************************************************************************************************/
18

function faireMenus(udefMenuID)

{//== udefMenuID:svg预定义的菜单编码
19

var udef_menu = udefMenuID;
20

var mydoc = SvgMainMapDoc;
21

var contextMenu = CurveControl.window.contextMenu;
22

var menuXml = CurveControl.window.printNode(mydoc.getElementById(udef_menu));
23

//alert(menuXml);
24

CurveControl.window.Titi = Titi;
25

CurveControl.window.printit = printit;
26

CurveControl.window.colorit = colorit;
27

CurveControl.window.showmsg = showmsg;
28

changeMenus(menuXml);
29

}
30

function changeMenus(menuXml)

{//== xml格式的菜单字符串
31

var contextMenu = CurveControl.window.contextMenu;
32

var newMenuRoot = CurveControl.window.parseXML(menuXml, contextMenu);
33

contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild);
34

//setMenuAction(contextMenu.firstChild);
35

}
36

function setMenuAction(menuRoot)

{
37

var len = menuRoot.childNodes.length;
38

if(len==0) return;
39

for(var i=0;i<len;i++)

{
40

var menu = menuRoot.childNodes[i];
41

//alert(menu);continue;
42

if(menu==null||menu.nodeName!="item") continue;
43

var active = menu.attributes['onactivate'];
44

if(active!=null&&active.length>0)

{
45

menu.addEventListener("activate", active, false);
46

}
47

}
48

}
49

//--------------------------------------------------------------------------
50

function Titi()
51

{
52

var msg = "温馨提示：\n 该页面为地图显示页面\n ALT键+鼠标左键:实现图像漫游；\n Ctrl+鼠标左键:图像放大或拉框放大；";
53

msg = msg+"\n Ctrl+Shift+鼠标左键:图像缩小或拉框缩小；";
54

alert(msg);
55

}
56

function printit()

{
57

if (confirm('确定打印吗？'))

{
58

try

{
59

if(parent) parent.print();
60

}
61

catch(e)

{}
62

}
63

}
64

function colorit(clr)

{ //背景色函数
65

var myob = SvgMainMapDoc.getElementById("rect_back");
66

if(myob) myob.setAttribute("fill", clr);
67

}
68

function showmsg(msg)

{
69

alert(msg);
70

}

转载于:https://www.cnblogs.com/hetonghai/articles/684082.html