天天看點

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"屬性會報錯

寵辱不驚,看庭前花開花落;去留無意,望天上雲卷雲舒

繼續閱讀