SVG與HTML、JavaScript的三種調用方式

時間 2019-11-29

標籤 svg html javascript 三種調用方式欄目 HTML 简体版

原文原文鏈接

1、在HTMl中訪問SVG的DOMjavascript

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>

2、在SVG文檔中嵌入JavaScripthtml

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>

3、在SVG文檔中連接外部JavaScriptjava

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

程序員的基礎教程：菜鳥程序員svg