原文:https://www.cnblogs.com/guohu/p/5085045.html
一、在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"属性会报错