SVG的DOM树

HTML页面加载SVG
<embed name="SVG_PowerSystemGraph" width="780px" height="350px" src="../SVGFile/PowerSystemGraph.svg" type="image/svg+xml"></embed>
<script type="text/javascript">
document.onreadystatechange = function()  
{  
      if(document.readyState == "complete")  
      {  
            Windown_LoadSVG("<%=CurrentMachNo %>", <%=PowerSystemGraphRefurbishCyc %>);
      }  
}
window.onunload = SVGDisponse;
</script>

乱码解决方法
1、 设置SVG文档编码格式:encoding="utf-8"；
2、 SVG文件的编码方式指定为utf-8，方法是用EditPlus打开SVG文件，文件－＞另存为　编码选择为utf-8即可以了；

基本的svgDOM树：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
 <g id="firstGroup">
  <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" />
  <text x="40" y="100">This is a basic SVG document!</text>
 </g>
</svg>

使用JAVASCRIPT访问SVG元素，并获取属性值
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
 <script type="text/ecmascript">
  <![CDATA[
  function showRectColor()
  {
   alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));
  }
   function showRectArea(evt)
  {
   var width = parseFloat(evt.target.getAttributeNS(null,"width"));
   var height =parseFloat(evt.target.getAttributeNS(null,"height"));
   alert("The rectangle area is: " + (width * height)); }
  function showRootChildrenNr()
  {
   alert("Nr of Children: "+document.documentElement.childNodes.length);
  }
  ]]>
 </script>
 <g id="firstGroup">
  <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="showRectArea(evt)"/>
  <text x="40" y="100" onclick="showRectColor()">Click on this text to show rectangle color.</text>
  <text x="40" y="130">Click on rectangle to show rectangle area.</text>
  <text x="40" y="160" onclick="showRootChildrenNr()">Click on this text to show the number of child
   <tspan x="40" dy="20">elements of the root element.</tspan>
  </text>
 </g>
</svg>

设置单个元素的属性值
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
 <script type="text/ecmascript">
  <![CDATA[
  function changeRectColor(evt)
  {
   var red = Math.round(Math.random() * 255);
   var green = Math.round(Math.random() * 255);
   var blue = Math.round(Math.random() * 255);
   evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
  }
  ]]>
 </script>
 <g id="firstGroup">
  <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="changeRectColor(evt)"/>
  <text x="40" y="100">Click on rectangle to change it's color.</text>
 </g>
</svg>

检查，并删除属性值
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
 <script type="text/ecmascript">
  <![CDATA[
  function removeFill(evt)
  {
   //通过获得元素，
   var element = evt.target;
   if (element.hasAttributeNS(null,"fill"))
   {
    element.removeAttributeNS(null,"fill");
   }
   else
   {
    alert("This element doesn't have a fill attribute.");
   }
  }
  ]]>
 </script>
  <g id="firstGroup">
   <rect width="70" height="50" x="40" y="5" fill="blue" onclick="removeFill(evt)"/>
   <rect width="70" height="50" x="40" y="65" fill="blue" onclick="removeFill(evt)"/>
   <rect width="70" height="50" x="40" y="125" fill="blue" onclick="removeFill(evt)"/>
   <rect width="70" height="50" x="40" y="185" fill="blue" onclick="removeFill(evt)"/>
   <rect width="70" height="50" x="40" y="245" fill="blue" onclick="removeFill(evt)"/>
   <text x="150" y="30">Click on rectangle
   <tspan x="150" dy="15">to remove it's color.</tspan>
  </text>
  </g>
 </svg>

父结点，子结点，和兄弟结点
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100">
 <script type="text/ecmascript">
  <![CDATA[
  function showContentAndRelatives(evt)
  {
   //get reference to text element
   var textElement = document.getElementById("myText");
   //get reference to parent of element
   var parent = textElement.parentNode;
   alert("the parent node has id '"+parent.getAttributeNS(null,'id')+"'\nNodename is '" +parent.nodeName+"'");
   //get a reference to the first child of the element "myText"
   var child = textElement.firstChild; //loop over all childs
   while (child != null)
   {
    //see if child is a tspan and has child nodes
    if (child.nodeName == "tspan" && child.hasChildNodes())
    {
     //see if firstChild is of nodeType "text"
     if (child.firstChild.nodeType == 3)
     {
      alert("child's text content="+child.firstChild.nodeValue);
     }
    }
    child = child.nextSibling;
   }
   alert("the content of the second tspan Child is: "+textElement.childNodes.item(1).firstChild.nodeValue);
  }
  ]]>
 </script>
 <g id="firstGroup">
  <text id="myText" x="50" y="30" onclick="showContentAndRelatives(evt)">
   <tspan>Click on text</tspan>
   <tspan x="50" dy="15">to get parent node data</tspan>
   <tspan x="50" dy="15">and to see the text node values </tspan>
   <tspan x="50" dy="15">of each line</tspan>
  </text>
 </g>
</svg>