SVG与html的交互(svg的js与html的js互调用)

最新推荐文章于 2024-05-14 10:55:03 发布

原创最新推荐文章于 2024-05-14 10:55:03 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #function #null #button #文档 #encoding

SVG专题专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个SVG与HTML交互的示例，展示了如何通过点击HTML中的按钮改变SVG图形的颜色，以及点击SVG图形更新HTML文本内容并弹出消息框。

这个例子显示了，在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"></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></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>

效果图：