How to add a class in a svg element (circle) using javascript?

I am trying to add class to svg elements (circles) but, I am getting “[object SVGAnimatedString]” as an output when I am trying to display the classname on console. Entire Code available on fiddle : jsfiddle.net/prated/rsv0yxgx

<script>
  var counter =0;
  function selectForPValues()
  {

    var colorFormed = new Array("orange","green","blue","yellow","black","pink");
    var index = document.getElementsByClassName("selected").length;
    for(var i=0;i<index;i++)
     {
       textVar = document.getElementsByClassName("selected")[i].id;
       console.log("Id: "+ textVar);
       document.getElementById(textVar).className = "tester";
       document.getElementById(textVar).style.fill = colorFormed[counter];
       console.log("Resultant: "+ document.getElementById(textVar).className);
     }
    counter++;
  }
</script>

Answer

you cannot add class to a svg with className , try

svg.setAttribute("class", "class Name");

Advertisement

Answer