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

XML
1. CSS Style
2. SVG
3. XML Schema
4. XQuery
5. XSLT stylesheet
Java
XML Tutorial
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
ASP.NET Tutorial
JavaScript DHTML
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
XML » SVG » 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
1. Mouse Clicks and Resizing Circles
2. Mouse Clicks and Scaled Ellipses
3. Dynamically Removing an SVG Element
4. Adding an SVG Element via ECMAScript
www.java2java.com | Contact Us
Copyright 2010 - 2030 Java Source and Support. All rights reserved.
All other trademarks are property of their respective owners.