SVG Javascript

by Erdinç Uzun

HTML

<svg width="350px" height="300px">
  <circle cx="100" cy="150" r="50" fill="white" stroke="black" stroke-width="5" onclick="doCircle(evt)" />
  <circle cx="210" cy="150" r="50" fill="white" stroke="black" stroke-width="5" onclick="doCircle(evt)" />
</svg>

JavaScript

function doCircle(evt) {
   var theCircle = evt.target;
   var radius = theCircle.getAttribute("r");
   var stroke_color = theCircle.getAttribute("stroke");
   var fill_color = theCircle.getAttribute("fill");

   if (stroke_color == "black")
     stroke_color = "red";
   else
     stroke_color = "black";

   if (fill_color == "white")
     fill_color = "silver";
   else
     fill_color = "white";

   if (radius == 50)
     radius = 75;
   else
     radius = 50;

   theCircle.setAttribute("r", radius);
   theCircle.setAttribute("stroke", stroke_color);
   theCircle.setAttribute("fill", fill_color);
 }