JavaScript获取SVG节点值

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

更多详细内容： W3C DOM   XML DOM

4.svg 代码如下

<! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 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 1024 768" onload = "init(evt)"

preserveAspectRatio = "xMidYMid meet" 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 就可以很便捷获得相关的元素，此外还有遍历的方法可以取到需要的元素，不过比较繁琐易出错。