以文本方式查看主题

-  中文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文档中文本框的字？  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=41727)

--  作者：mwg1234567
--  发布时间：12/28/2006 5:36:00 PM

--  在JavaScript怎么样改变SVG文档中文本框的字？
用getSVGDocument和getElementById得到SVGTextElement对象，但是怎么得到该对象显示的字符串，又怎样去改变呢？
  
  谢谢大家了
--  作者：tamefox
--  发布时间：12/29/2006 8:36:00 AM

--  
我编写了一个小程序，也许对你有帮助。其中“node.firstChild.nodeValue”就可以取到文本节点的内容，也许别人还有更简单的办法，还望赐教！

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" onload="changeText()">
 <desc>
  <!-- put a description here -->
 </desc>
 <script type="text/javascript">
   function changeText(){
        var node=document.getElementById("txt");
        node.firstChild.nodeValue=node.firstChild.nodeValue+"1";　　　　
　　　　setTimeout('changeText()',500)   
   }
     
 </script>
 <g>
  <!-- your graphic here -->
  <text id="txt" x="50" y="50">1</text>
 </g>
</svg>

--  作者：upc2neiep
--  发布时间：12/29/2006 4:13:00 PM

--  
学习，收到。。。。。呵呵
--  作者：mwg1234567
--  发布时间：12/30/2006 9:06:00 AM

--  
收到，多谢
--  作者：wwwtiger
--  发布时间：12/30/2006 3:11:00 PM

--  
function setTextNodeValue(id, value)
{
 if(svgDocument.getElementById( id ).hasChildNodes() == true)
  svgDocument.getElementById( id ).firstChild.data = value ;
 else
 {
  var textNode = svgDocument.createTextNode(value );
  svgDocument.getElementById( id ).appendChild(textNode);
 }
}

function getTextNodeValue(id)
{
 if(svgDocument.getElementById( id ).hasChildNodes() == true)
  return svgDocument.getElementById( id ).firstChild.data;
 else
  return null;
}

--  作者：alai7150
--  发布时间：1/6/2007 9:49:00 AM

--  
详细讲解一下text元素的结构
<text id="t" x="10" y="20" style="font-size:50;stroke:red">Sample Text</text>
如此的一个text元素其实包含一个子元素#text
text---attribute(id,x,y,style)
   |
  #text----value(sample text)
用一下方法取得元素
var tnode=document.getElementById("t")  //取得的是text元素 可以用getAttribute方法获得他的各个属性植
var tt=tnode.firstChild; //取到#text元素，它只有一个value 及sample text
有两种方法可以获得
var tvalue=tt.getData(); //方法
var tvalue=tt.nodeValue;//属性
其值都是sample text
--  作者：alai7150
--  发布时间：1/6/2007 9:56:00 AM

--  
所以如果要想用js+dom动态创建文字text
需要如下4步
1：var tnode=document.createElement("text");//
     tnode.setAttribute("x","100");//设置text元素的各属性x,y, style……
2：var tt=document.createTextNode("sample text");
3：tnode.appendChild(tt); //为text 元素赋值 sample text
4：document.appendChild(tnode);   //将整个text元素加入文档树中

希望如此讲解能够让大家清楚text元素的结构，能够给大家带来帮助。

W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms