Javascript 如何将CSS类更改为<；使用>；孩子们在房间里？

我正在制作动画，目标是在SVG中更改

xlink:href

。（用于更改形状），并根据其内部位置更改类

这是我的SVG

<svg viewBox="-20 -20 600 200" id="main">
  <defs id="test">
    <rect width="80" height="80" id="circle" fill="red" class="first" />
    <rect width="80" height="80" id="square" fill="pink" class="second" />
    <rect width="80" height="80" id="cross" fill="blue" class="third" />
  </defs>

  <g id="load-area">
    <use x="0" xlink:href="#circle" />
    <use x="100" xlink:href="#square" />
    <use x="200" xlink:href="#cross" />
  </g>
</svg>

每个

rect

元素中的类根据位置具有不同的

动画延迟

（第一个在0s执行，第二个在2s执行，第三个在4s执行，依此类推）

使用JS，我会在

#加载区

main.children['load-area'].children[0].setAttribute（“xlink:href”，getFigure（random（））

它可以工作，形状会改变，但是假设当它得到三倍的id
#cross
时，所有元素都有
第三个
CSS类

我需要在
的每个子级中更改
CSS类
，我该怎么做

在元素树下：


我使用：
main.children['load-area'].children
获取所有
，但它没有子元素，如下所示：

您可以使用CSS变量解决这个问题，这些变量与第n个子选择器相结合，您不再需要这些类

这是一个基本的例子


rect{
动画：更改3s变量（-d，0s）无穷大；
}
@关键帧改变{
0% {
不透明度：1；
}
33%,100% {
不透明度：0；
}
}
#加载区域>使用：第n个子（1）{--d:0s}
#加载区域>使用：第n个子（2）{--d:1s}
#加载区域>使用：第n个子（3）{--d:2s}
/*#加载区域>使用：第N个子（N）{--d:Xs}*/


element.setAttribute（attributename、attributevalue）

另一种选择是将带有CSS的动画分配给
中的每个元素，但我需要应用选择器：（谢谢，我需要做一个测试，但这对我来说是个不错的选择。
document.getElementsByTagName("use")[0].setAttribute("xlink:href", "#circle");