Mega Code Archive
Determining Attribute Values of SVG Elements
<![CDATA[
<?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>
]]>