Mouse Clicks and Resizing Circles : JavaScript « SVG « XML

1. XML
2. SVG
3. JavaScript

Mouse Clicks and Resizing Circles

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

  <desc>Capture mouse click events</desc>
  <script type="text/ecmascript"> 
    function mouseClick1(evt)
    {
       var circle = evt.target;
       var currentRadius = circle.getAttribute("r");
       if(currentRadius == 50)
       {
          circle.setAttribute("r", currentRadius*2);
          circle.setAttribute("fill", "#FF0000");
       }else{
          circle.setAttribute("r", currentRadius*0.5);
          circle.setAttribute("fill", "#FFFF00");
       }
    }
  </script>
        <g transform="translate(50,40)">
           <text x="0" y="0" font-size="30">
             Click inside the circle
           </text>
        </g>
        <g transform="translate(20,90)">
           <rect x="0" y="0" width="500" height="300"
                 fill="#CCCCCC" stroke="blue"/>
           <circle onclick="mouseClick1(evt)"
                   cx="250" cy="150" r="50" fill="blue"/>
        </g>
</svg>

 

Related examples in the same category