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

原文：https://www.cnblogs.com/guohu/p/5085045.html

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

一、在HTMl中访问SVG的DOM

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  <script language="javascript"> window.onload = function(){     //获得SVG文档的DOM结构      var svgdoc = document.getElementById("id1").getSVGDocument(); }  </script>  </head>  <body>    <!-- 插入SVG文档 -->  <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="a.svg" height="200px" width="400px" type="image/svg+xml">   </body> </html>

二、在SVG文档中嵌入JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" width="3.5in" height="1in"> <title>Listing 24-1 from the XML Bible</title> <script type="text/javascript"> <![CDATA[ alert(123); ]]> </script> <circle r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2" /> </svg>

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

1 2 3 4 5 6 7 8 9

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3.5in" height="1in"> <title>Listing 24-1 from the XML Bible</title> <circle id="x" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2" /> <script type="text/javascript" xlink:href="a.js"> </script> </svg>

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