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

svg和js交互

2014-03-08 10:12 411 查看
//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.getElementByIdx_x("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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航