JavaScript获取SVG节点值

       SVG是基于XML来描述二维图形的语言。SVG的文本内容可以用一棵DOM树来描述，对DOM树不了解的朋友可以打开资源管理器，打个比方：本地磁盘就是根节点（树根）下面的文件夹就是节点，同级的文件夹之间称为兄弟节点，文件夹里还有文件夹，这个就叫子节点。

更多详细内容：W3C DOM  XMLDOM

4.svg 代码如下

<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

 

<svg id="zjsvg" width="50cm" height="25cm" viewBox="0 0 1024768" onload="init(evt)"

preserveAspectRatio="xMidYMidmeet" zoomAndPan="magnify"

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<script xlink:href="4.js" language="JavaScript"/>

   

    <rect id="t1" x="300" y="0" width="1cm" height="3cm" stroke="red" fill="blue" />

    <text id="tx01" startOffset="0">

       <tspan id="tx02" x="300" y="130" >156156</tspan>

    </text>

  <rect id="t2" x="300" y="150" width="50" height="50" stroke="red“  

</svg>

 

4.js 代码如下

function init(evt){

    var svgdoc =evt.target.ownerDocument;

    var root = svgdoc.getRootElement();

   

    var t01 = root.getElementById("tx02").getAttribute("x");

    alert(t01);

   

    var t02= root.getElementById("tx02").firstChild.nodeValue;

    alert(t02);

}

 

现在要获取DOM上任意一个节点的值。（IE6+ASV3、FireFox3.6有效）

       取属性值：

       js代码中的变量t01取到了属性x的值

       理解记忆了2个方法即可轻易获取任何元素的id

       1.getElementById("xxx");

       顾名思义，获得一个元素通过这个元素的id值

       这个方法是SVGSVGElement的，返回一个Element。

       "get"范围是调用它的元素（包含了其子元素）。

       2.getAttribute("xxx");

       用中文描述：元素.获得属性("属性名")  此方法，返回属性值

      

取文本值：（元素标签之间的文本）

       这个动作要稍微复杂些

var t02 =root.getElementById("tx02").firstChild.nodeValue;

       先解释一下，文本在svg中是“放在”文本节点中的，文本节点的值是文本。

       所以要获得文本，得先获得文本节点。^_^ 想吃到巧克力就得先拿到巧克力罐子。

       svg中任何一个“单元”都是一个节点——注释、属性、文本……

先获得id为tx02的元素，再获得其第一个子节点（firstChild  文本节点），它的值（nodeValue）即是文本。

 

小结：这里的元素都加上了id属性，这样使用getElementById就可以很便捷获得相关的元素，此外还有遍历的方法可以取到需要的元素，不过比较繁琐易出错。