Mega Code Archive
Mouse Clicks and Scaled Ellipses
<![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">
<script type="text/ecmascript">
function mouseClick1(event)
{
var ellipse = event.target;
var currentXRadius = ellipse.getAttribute("rx");
if(currentXRadius == 120)
{
ellipse.setAttribute("rx", currentXRadius*2);
ellipse.setAttribute("fill", "#FF0000");
}
else
{
ellipse.setAttribute("rx", currentXRadius*0.5);
ellipse.setAttribute("fill", "#FFFF00");
}
}
</script>
<g transform="translate(20,50)">
<text x="0" y="0" font-size="30">
Click on the moving ellipse
</text>
</g>
<g transform="translate(50,100)">
<rect x="0" y="0" width="500" height="400"
fill="#CCCCCC" stroke="blue"/>
<ellipse onclick="mouseClick1(evt)"
cx="250" cy="200" rx="120" ry="60"
fill="blue">
<animateTransform attributeName="transform"
attributeType="XML"
type="scale"
from="0" to="1"
begin="0s" dur="4s"/>
</ellipse>
</g>
</svg>
]]>