SVG与HTML、JavaScript的三种调用方式

一、在HTMl中访问SVG的DOM：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5  <script language="javascript">
 6 window.onload = function(){
 7     //获得SVG文档的DOM结构
 8      var svgdoc = document.getElementById("id1").getSVGDocument();
 9 }
10  </script>
11  </head>
12  <body>
13 
14  <!-- 插入SVG文档 -->
15  <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="a.svg" height="200px" width="400px" type="image/svg+xml">
16 
17 </body>
18 </html>

 

 

二、在SVG文档中嵌入JavaScript：

 

 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 2 <svg xmlns="http://www.w3.org/2000/svg"
 3 width="3.5in" height="1in">
 4 <title>Listing 24-1 from the XML Bible</title>
 5 <script type="text/javascript">
 6 <![CDATA[
 7 alert(123);
 8 ]]>
 9 </script>
10 <circle r="30" cx="34" cy="34"
11 style="fill: red; stroke: blue; stroke-width: 2" />
12 </svg>

 

 

三、在SVG文档中链接外部JavaScript：

 

1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
3 width="3.5in" height="1in">
4 <title>Listing 24-1 from the XML Bible</title>
5 <circle id="x" r="30" cx="34" cy="34"
6 style="fill: red; stroke: blue; stroke-width: 2" />
7 <script type="text/javascript" xlink:href="a.js">
8 </script>
9 </svg>

 

 

注意的是需要添加命名空间xmlns:xlink="http://www.w3.org/1999/xlink"，不然解析script节点的xlink:href="a.js"属性会报错

 

posted @ 2010-12-03 15:14  网无忌  阅读(6655)  评论(0)  编辑  收藏  举报