svg和js交互

来源：互联网发布：淘宝代购怎么找编辑：程序博客网时间：2024/06/14 05:38

//1使用xlink在svg文档中引入javascript:
//<?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 XMLBible</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>

2 在svg文档中内嵌入javascript代码：
<?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 XMLBible</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>

<script type="text/javascript">
<![CDATA[
具体的js代码
]]>

3通过HTML 改变SVG中的属性

//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document</title>
<meta name="generator" content="editplus"/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript">

</script>
</head>

0 0