Updating Attributes of SVG path Elements

---

Updating Attributes of SVG circle Elements

Consider the pair of circles rendered in Figure 12.2.

Figure 12.2: A mouse-aware pair of circles.

The SVG document in Listing 12.2 demonstrates how to define an ECMAScript function that can update the coordinates of an SVG circle element.

Listing 12.2 shiftCircles2.svg

<?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">  <!-- Capture mouse clicks and update circle -->  <script type="text/ecmascript">    <![CDATA[      var currentX = 0.;      function clickLeftCircle(event)      {         var circle = event.target;         var currentX = circle.getAttribute("cx");         if(currentX < 250)         {            circle.setAttribute("cx", currentX*1.1);         }         else         {            circle.setAttribute("cx", "150");         }      }      function clickRightCircle(event)      {         var circle = event.target;         var currentFill = circle.getAttribute("fill");         if(currentFill == 'red')         {            circle.setAttribute("fill", "blue");         }         else         {            circle.setAttribute("fill", "red");         }      }  ]]> </script> <!-- ==================================== --> <g transform="translate(10,10)">  <!-- red outline of a rectangle -->  <rect x="0" y="0"        width="800" height="500"        fill="none" stroke="none"/>  <!-- Specify function to handle mouse   -->  <!-- clicks and update the left circle -->  <circle onclick="clickLeftCircle(evt)"          cx="150" cy="250" r="50"          fill="blue"/>  <!-- clicks and update the right circle -->  <circle onclick="clickRightCircle(evt)"          cx="350" cy="250" r="50"          fill="red"/>  <!-- Display text message -->  <text x="250" y="50"        font-family="Verdana"        font-size="25" text-anchor="middle">    Click inside either circle  </text> </g> </svg>

Remarks

The SVG document in Listing 12.2 extends the concept presented in Listing 12.1 by defining two 'mouse-aware' circles:

<!-- Specify function to handle mouse  --> <!-- clicks and update the left circle --> <circle onclick="clickLeftCircle(evt)"         cx="150" cy="250" r="50"         fill="blue"/> <!-- clicks and update the right circle --> <circle onclick="clickRightCircle(evt)"         cx="350" cy="250" r="50"         fill="red"/>

The ECMAScript function clickLeftCircle() is associated with the left circle and the ECMAScript function clickRightCircle() is associated with the right circle. As usual, both ECMAScript functions are invoked with the built-in variable evt. Each time you click inside the left circle, the ECMAScript function clickLeftCircle() is executed; this function is listed below:

function clickLeftCircle(event) {    var circle = event.target;    var currentX = circle.getAttribute("cx");    if(currentX < 250)    {       circle.setAttribute("cx", currentX*1.1);    }    else    {       circle.setAttribute("cx", "150");    } }

The ECMAScript function clickLeftCircle() first assigns a reference to the variable circle, and then assigns the value of the cx attribute to the variable currentX. While the value of the variable currentX is less than 250, the 'if' logic multiplies the value of currentX by 1.1, which shifts the left circle toward the right. When the value of the variable currentX reaches a value of 250 or greater, the code in the 'else' logic assigns the value 150 to the variable currentX, which shifts the left circle back to its original position.

Each time you click inside the right circle, the ECMAScript function clickRightCircle() is executed, which simply alternates the color of the right circle between red and blue by updating the value of the fill attribute appropriately.

---