Multiple <use> of <symbol> not working

[1GR3]

I've created a simple animation which I'd like to reuse 12 times:

<defs>
    <symbol id="circ">
      <circle >
        <animate attributeName="r" begin="enable" from="10" to="80" dur="1" />
        <animate attributeName="cy"  begin="enable" from="0" to="-50" dur="1" />
        <animate attributeName="r" begin="enable+1" to="10" from="80" dur="2" />
        <animate attributeName="cy"  begin="enable+1" to="-100" from="-50" dur="2" />
      </circle>
    </symbol>
  </defs>
  
  <g id="colorWheel" class="" transform="rotate(-90)" transform="translate(50%,50%)">
    <g id="o1" transform="rotate(30)" ><use href="#circ" class="oval"  fill="#FF7F00"/></g>
    <g id="o2" transform="rotate(60)" ><use href="#circ" class="oval"  fill="#FFFF00"/></g>
    <g id="o3" transform="rotate(90)" ><use href="#circ" class="oval"  fill="#7FFF00"/></g>
...

but I can only trigger them by ID and not by class

//var oval = document.getElementsByClassName("oval");
var o1= document.getElementById("o1");
var o4= document.getElementById("o4");

function wake() {
  //oval.animate("enable");
  o1.animate("enable");
  o4.animate("enable");
}

[JonFitbit · Accepted solution]

If you want to trigger them by class name, you can iterate the `oval` array:

oval.forEach((item) => {
  item.animate("enable");
})