You are looking to change a class, but you also have an ID to define the svg color, so it's better to change the color of the ID when it's hover:

#circleSVG:hover{
  fill: orange;
  opacity:0.25;
}

To change the color by the ID, you can use

element = document.getElementById(id);

Why do you use JS to accomplish that? You can use only css.

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG:hover {
  fill: orange;
  opacity: 0.25;
}

https://jsfiddle.net/x2pxx92e/11/

The problem is basically how the CSS selectors works.

Basically an id selector (#) is more specific than a class selector (.). So the "fill: orange" property in the class selector (.testCircle) is not being applied because the id selector (#testCircle) is more specific and also have a fill property. On the other hand, the opacity property is working because the id selector doesn't specify that property.

To fix this you can add "!important" as follow:

.testCircle{
  fill: orange !important;
  opacity:0.25;
}

Or even better, make your selector more specific:

#circleSVG.testCircle{
   fill: orange !important;
   opacity:0.25;
}