以文本方式查看主题

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