Mouse Clicks and Scaled Ellipses : JavaScript « SVG « XML

1. XML
2. SVG
3. JavaScript

Mouse Clicks and Scaled Ellipses

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

 

Related examples in the same category