这个例子显示了,在html中单击命令按钮设定svg中的矩形的填充颜色,并且调用svg的js函数FunCallByHtmlJs,产生个消息框。
在svg中,单击矩形时,设置html中的text的文本内容,并且调用html的js函数FunCallBySvgJs,产生个消息框。
svg文档以嵌入在html文档中运行。
例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。
svg文件的代码:
//文件名:Svg&HtmlInteractive.svg
- <?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%" onload="init(evt)" onclick="Click(evt)">
- <mce:script type="text/javascript"><!--
- var svgDoc = null ;
- var svgRoot = null ;
- var parentWnd = null ; //保存html的window对象
- //初始化
- function init(evt)
- {
- svgDoc = evt.target.ownerDocument ;
- svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到
- parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法
- if(parentWnd.document.title == null || parentWnd.document.title == '')
- {
- alert("请不要直接在浏览器中打开‘svg’文档!");
- //下面的代码作用是不提示确认关闭窗口
- parentWnd.opener = null ;
- parentWnd.open('', '_self') ;
- parentWnd.close() ;
- }
- svgDoc.svgWnd = window ; //这里人为进行设定,以便在html中的第一种交互方式中可以取的到svg的window对象
- }
- function FunCallByHtmlJs()
- {
- alert('这个消息框是在html的js中调用svg的js函数产生的。') ;
- }
- function Click(evt)
- {
- var id = evt.target.id ;
- if(id == 'rect') //单击在矩形上,而不是背景上时
- {
- if(parentWnd)
- {
- parentWnd.txt.value = '在svg中设置html中的text的文本内容' ;
- parentWnd.FunCallBySvgJs() ; //调用html中的js函数
- }
- }
- }
- // --></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" />
- <text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形,设置html的text文本内容</text>
- </svg>
html文件的代码:
//文件名:Svg&HtmlInteractive.html
- <html>
- <head>
- <title>SVG与html的交互</title>
- </head>
- <body onload="htmInit()">
- <mce:script type=text/javascript><!--
- var svgDoc = null ;
- var svgRoot = null ;
- var svgWnd = null ; //svg的window对象
- function htmInit()
- {
- txt.value = '' ;
- }
- function FunCallBySvgJs()
- {
- alert('这个消息框是在svg的js中调用html的js函数产生的。') ;
- }
- function Btn1Clk()
- {
- //第一种方式
- svgDoc = emSvg.getSVGDocument() ;
- if(svgDoc == null) return ;
- svgRoot = svgDoc.documentElement ;
- if(svgRoot == null) return ;
- var rect = svgRoot.getElementById('rect') ;
- if(rect) rect.setAttribute('fill', 'blue') ;
- svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的
- if(svgWnd) svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
- }
- function Btn2Clk()
- {
- //第二种方式
- svgWnd = emSvg.window ;
- if(svgWnd == null) return ;
- svgRoot = svgWnd.svgRoot ; //svgRoot在svg的js中是个全局的变量
- if(svgRoot == null) return ;
- var rect = svgRoot.getElementById('rect') ;
- if(rect) rect.setAttribute('fill', 'red') ;
- svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
- }
- // --></mce:script>
- <input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" />
- <input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" />
- <input id="txt" type="text" value="" />
- <embed id="emSvg" src="Svg&HtmlInteractive.svg" mce_src="Svg&HtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
- </body>
- </html>
效果图: