Determining Attribute Values of SVG Elements : JavaScript « SVG « XML

1. XML
2. SVG
3. JavaScript

Determining Attribute Values of SVG Elements

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script type="text/ecmascript">
    function showAttributes(event){
       var msg = "";

       var theRect   = event.target;
       var theParent = theRect.parentNode;

       var theID     = theRect.getAttribute("id");
       var xPosition = theRect.getAttribute("x");
       var yPosition = theRect.getAttribute("y");
       var theWidth  = theRect.getAttribute("width");
       var theHeight = theRect.getAttribute("height");

       msg += "Rectangle ID: " + theID     + "\n";
       msg += "x coordinate: " + xPosition + "\n";
       msg += "y coordinate: " + yPosition + "\n";
       msg += "width:        " + theWidth  + "\n";
       msg += "height:       " + theHeight + "\n";

       alert(msg);
    }

  </script>

  <g transform="translate(50,50)">
     <text id="text1" font-size="24" fill="blue">
       Click inside the rectangle:
     </text>
  </g>

  <g transform="translate(50,100)">
     <rect id="rect1" fill="red"
           onclick="showAttributes(evt)"
           x="10" y="10" width="200" height="100"/>
  </g>
</svg>

 

Related examples in the same category