SVG+javascript网页绘图.doc

SVG与JavaScript的结合一01.svg Svg_test.html function init(evt) var myTarget = evt.getTarget(); if( myTarget.getNodeType() != 9 ) /if not DOCUMENT_NODE svgDoc = myTarget.getOwnerDocument(); else svgDoc = myTarget; function create() var obj = svgDoc.getElementById(curve); var data=M ; for(t=0;t120;t+) afa=t*Math.PI/180; x=250+50*(Math.cos(afa)+(afa)*Math.sin(afa); y=200-50*(Math.sin(afa)-(afa)*Math.cos(afa); data += x + , + y + ; data += ; obj.setAttribute(d, data);SVG与JavaScript的结合二02.svg !CDATA function init(evt) svgdoc = evt.target.ownerDocument; /获取SVG文档对象 root = svgdoc.rootElement; /获取SVG文档对象的根元素，此例子中获取的元素 function change(evt) /获取当前节点，从哪个元素调用的就获取哪个元素，此例中是 var obj = evt.target; /创建新节点，名为node。该节点是个圆。通过来定义 var node = svgdoc.createElement(circle); /给定义圆心（cx,cy），半径r,颜色 node.setAttribute(cx,200); node.setAttribute(cy,200); node.setAttribute(r,100); node.setAttribute(style,fill:red); /node节点替代root节点下的obj节点 root.replaceChild(node,obj); 02.svg Test2.html function init(evt) svgdoc = evt.target.ownerDocument; /获取SVG文档对象 root = svgdoc.rootElement; /获取SVG文档对象的根元素，此例子中获取的元素 function change(evt) /获取当前节点，从哪个元素调用的就获取哪个元素，此例中是 var obj = evt.target; /创建新节点，名为node。该节点是个圆。通过来定义 var node = svgdoc.createElement(circle); /给定义圆心（cx,cy），半径r,颜色 node.setAttribute(cx,200); node.setAttribute(cy,200); node.setAttribute(r,100); node.setAttribute(style,fill:red); /node节点替代root节点下的obj节点 root.replaceChild(node,obj); 效果与上图相同。SVG+javascript网页绘图还有什么画不出来的-svg嵌入html及对svg使用javascript2009-08-20 17:41:04|分类： SVG |标签： |字号大中小订阅 今天偶然兴致来也，就看了一下svg跟javascript的问题，发现虽然现在所有主流浏览器，像ie,firefox,opera等等还不支持将 svg当作html直接嵌入到网页的html代码中(当然我希望，也相信这在未来必然会实现的)，但是svg本身支持javascript，而且在 html网页中也有办法通过javascript得到svg的dom文档，这样的话，那真是在网页上绘图只有想不到的，没有做不到的了，甚至超复杂的动画 等各种效果都能通过程序在网页上实现出来，而那些什么柱状图，饼形图，折线图的，那简直就是轻而易举易如反掌的小儿科了都。而且svg比vml更大的优势 是vml好像只是微软搞出来的东东，也只有支持ie内核的浏览器才能用，但是svg是公共的，opera,firefox,ie等全部都支持。下面就列举 一下目前javascript获取svg文档的方法，会了这个其他的问题也就是具体的svg的语法功能问题和dom节点操作的事了。html网页中嵌入svg的方法使用 标签 标签被所有主流的浏览器支持，并允许使用脚本。注释：当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 。任何 HTML 规范中都没有 标签。语法：注释：pluginspage 属性指向下载插件的 URL。使用 标签 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本，用这个应该是无法从html用javascript获取到svg的dom。注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！语法：注释：codebase 属性指向下载插件的 URL。使用 标签 标签可工作在大部分的浏览器中。语法：当然我们都期望着有一天，我们可以像下面这样就能在html网页中使用svgThis is an HTML paragraph从html中调取svg的dom的方法：首先html中的svg得用如下标签引用:然后得到svg dom的javascript为：var svgdoc = document.getElementById(id1).getSVGDocument();在svg文档中内嵌入javascript代码：Listing 24-1 from the XML Bible使用xlink在svg文档中引入javascript:Listing 24-1 from the XML Biblea.js:alert(123)alert(document.getElementById(x);这里要注意的是需要添加命名空间xmlns:xlink=/1999/xlink，不然解析scr