Accessing Elements and Getting Attribute Values

<?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>

Link to example 2 (get_reference_attribute.svg) – in a separate window)

The above example shows three methods on how to make a reference to an element: document.getElementById(yourId): This method makes a reference to an element that has an unique id. It is a method of the document object and is used in the function showRectColor(). document.documentElement: This method makes a reference to the root or document element. It is also a method of the document object. It is used in the function showRootChildrenNr(). The same result can be achieved using the property document.rootElement. evt.target: This method makes a reference using the evt object. The event object is a special object that is generated after a mouse, keyboard, document, DOM or status event has happened. It has several properties and methods, among them it knows which element has triggered the event. The advantage of the method evt.target is that the triggering element doesn’t need an unique id and that it can be used by many elements simultaneously. This method is used in the function showRectArea(). After creating the reference to an element, the attributes can be queried using the method element.getAttributeNS(). This method returns the value of an attribute, but the result is always a string value. If you want to receive a number value from an attribute you need to call the function parseFloat or parseInt as shown in the function showRectArea(evt). Although the method element.getAttribute() would work as well, it is recomended to use the method element.getAttributeNS(), because it also works in multi-namespace documents. This method takes two arguments: the namespace name and the attribute name. If the host namespace is SVG you can use null instead of the full namespace definition, as the method automatically replaces the null with the host namespace. The functions showRectColor() and showRectArea() demonstrate the usage of the element.getAttributeNS() method. The function showRootChildrenNr() returns the number of child nodes in the root element. childNodes is an array containing references to all child elements of an element. childNodes.length returns the number of elements in the array. Batik and the Adobe SVG viewer return a different length of the .childNodes array. This is because Batik does not count the whitespace notes between the real elements, while ASV does. As a result, Batik will return 2 (the script element and the group element) while ASV will return 5: the first child is the line break and the following spaces, the second is the script element, the third again a line break and spaces, the fourth element is the group with the id “firstGroup” and the last element is again a line break.