以文本方式查看主题 - 中文XML论坛 - 专业的XML技术讨论区 (http://bbs.xml.org.cn/index.asp) -- 『 SVG/GML/VRML/X3D/XAML 』 (http://bbs.xml.org.cn/list.asp?boardid=21) ---- 有谁知道通过javascript和SVG的DOM接口,来动态生成rect? (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=19068) |
-- 作者:caoxy -- 发布时间:5/31/2005 9:01:00 PM -- 有谁知道通过javascript和SVG的DOM接口,来动态生成rect? 我的毕业设计是基于SVG的实时数据发布系统,系统中的rect是根据数据库中的数据动态生成的,现在我的问题是,数据已经通过JavaBean读取出来了,怎样通过javascript来动态生成SVG中的rect? |
-- 作者:keeponline -- 发布时间:6/1/2005 10:46:00 AM -- 下面的例子展示了通过 DOM 接口如何删除现有节点,添加新的节点并为新节点设置了超级链接地址 |
-- 作者:keeponline -- 发布时间:6/1/2005 10:46:00 AM -- <g onclick="operate_Dom()" id="g5" transform="translate(0 80)"> <text id="txt1" x="6px" y="30px" style="font-size:15">operate DOM</text> <text id="txt2" x="6px" y="50px" style="font-size:15">operate DOM</text> </g> <!-内嵌脚本代码' <script language="JavaScript"><![CDATA[ function operate_Dom(){ //通过document环境变量获取id值为"g5"的节点 var g5=document.getElementById("g5"); //将g5节点下所有text节点删除 var txts=g5.getElementsByTagName("text"); for(var i=txts.length-1;i>=0;i--){ g5.removeChild(txts.item(i)); } //将g5节点的onclick事件删除 g5.removeAttribute("onclick"); //创造一个文本节点对象 var text = document.createElement ("text"); text.setAttribute("x", 100); text.setAttribute("y", 100); //将文本内容添加到text节点对象中 text.appendChild(document.createTextNode("new text")); //创造一个链接节点,注意在这里给设置节点和属性时必须指定命名空间 var a=document.createElementNS("http://www.w3.org/2000/svg","a"); a.setAttributeNS( "http://www.w3.org/2000/xlink/namespace/", "xlink:href", "http://www.sina.com"); //将text节点添加到链接节点中 a.appendChild(text); //将链接节点添加到g5节点中 g5.appendChild(a); //获取视图范围 var bBox=(document.getDocumentElement().getBBox()); //创建一个矩形节点 var shape = document.createElement("rect "); //配置属性 shape.setAttribute("x", bBox.x); shape.setAttribute("y", bBox.y); shape.setAttribute("width", bBox.width); shape.setAttribute("height", bBox.height); shape.setAttribute("style", "fill: #eeeeee"); shape.getStyle().setProperty("stroke","red"); shape.getStyle().setProperty("stroke-width","1"); //将矩形节点添加到SVG根节点子节点队列的最前边 document.getDocumentElement().insertBefore(shape,document.getDocumentElement().firstChild); } ]]></script> |
-- 作者:caoxy -- 发布时间:6/1/2005 3:53:00 PM -- 太谢谢了,虽然不是直接有用,但是启发了我,我的系统现在能实时显示图形了,谢谢keeponline,以后大家多交流, |
-- 作者:keeponline -- 发布时间:6/2/2005 7:12:00 PM -- 能把你的程序给我一份看看吗?keeponline75@hotmail.com 谢谢。 我对从数据库里把数据读出来的那段不是很了解,想请教你一下。你的数据形式是怎么样的?生成XML数据文件吗? 再次谢谢,希望能帮一下忙。 |
-- 作者:caoxy -- 发布时间:6/2/2005 7:47:00 PM -- 我的邮箱今天打不开,要不用qq传吧? |
-- 作者:caoxy -- 发布时间:6/2/2005 7:58:00 PM -- .我的邮箱打不开 [此贴子已经被作者于2005-6-3 11:48:05编辑过]
|
-- 作者:keeponline -- 发布时间:6/3/2005 12:33:00 PM -- 好,我的QQ是106076402,不过我还是用MSN多,keeponline75@hotmail.com 有机会大家多联系。 |
-- 作者:narilee -- 发布时间:7/11/2005 3:24:00 PM -- mark |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
171.875ms |