Scripting SVG with JS

• SVG object model is programatically accessible through XML DOM interfaces and SVG DOM interfaces.
• E.g. JavaScript can be used to manipulate object properties.

    <svg onload="cycleColors();" >
    
    <script>
      var counter=0;
      var colors=["red", "green", "blue"];
      
      function cycleColors()
      {
        var elem = document.getElementById("circle1");
        elem.setAttribute("style", "fill:"+colors[counter%3]);

        elem = document.getElementById("circle2");
        elem.setAttribute("style", "fill:"+colors[(counter+1)%3]);
        
        elem = document.getElementById("circle3");
        elem.setAttribute("style", "fill:"+colors[(counter+2)%3]);

        ++counter;

        setTimeout(cycleColors, 500);
      }
    </script>
    
    <style>
      circle:hover {fill-opacity:0.9; stroke-width:2mm;}
    </style>
  
    <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
    <circle id="circle1" ... />
    <circle id="circle2" ... />
    <circle id="circle3" ... />
    </g>
  </svg>