您的位置：首页 > Web前端 > JavaScript

SVG与JS的交互

2010-11-17 09:25 148 查看
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 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>

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 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>

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

3通过HTML 改变SVG中的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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">
<!--
var changeR = function (opration){
var svgDoc = document.getElementById("svgmapctrl").getSVGDocument();
var circle = svgDoc.getElementById("circle1");
var r = parseInt(circle.getAttribute("r"));
if(opration == '+' && r<150) circle.setAttribute("r",r+10);
if(opration == '-' && r>10) circle.setAttribute("r",r-10);
}
//-->
</script>
</head>

<body>
<embed width="300" height="300" type="image/svg-xml" id="svgmapctrl"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="svg2js.svg" ></embed><br />
<input type="button" value="变大" onclick="changeR('+')" />    <input type="button" value="缩小" onclick="changeR('-')" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航