以下这个例子显示了，在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
<svg width="640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" onload="init(evt)" onclick="Click(evt)">
<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函数
}
}
}
</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()">
<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函数
}
</script>
<input type="button" value="设置svg中矩形的填充颜色为蓝色" onclick="Btn1Clk()" />
<input type="button" value="设置svg中矩形的填充颜色为红色" onclick="Btn2Clk()" />
<input id="txt" type="text" value="" />
<embed id="emSvg" runat="server" src="http://zg672313.blog.163.com/blog/SvgHtmlInteractive.svg" mce_src="http://zg672313.blog.163.com/blog/SvgHtmlInteractive.svg" width="100%" height="95%" wmode="transparent"/>
</body>
</html>
效果图：
另外: 在aspx 页面中，emSvg对象会找不会，应该使用 document.getElementById("emSvg") 来查找 SVG对象
本文暂时没有评论，来添加一个吧(●'◡'●)