Javascript 将svg旋转8弧，顺时针和逆时针旋转

请帮我做这个

我已经在这张图中显示了这个svg 这里是我的代码：

var弧点=[-31，-66，-101，-136，-171，-206，-241，-276]；
颜色=[“红”、“绿”、“蓝”、“橙”、“黄”、“紫”、“粉红”]；
对于（变量i=0；i

svg{
高度：100px；
宽度：100px；
}
圈{
笔画宽度：4px；
填充：透明；
}
#灰色的{
笔画：灰色；
}
#红色的{
笔画：红色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#绿色的{
笔画：绿色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#蓝色的{
笔画：蓝色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#橙色的{
笔画：橙色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#黄色的{
笔画：黄色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#紫色的{
笔画：紫色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}
#粉红的{
笔画：粉红色；
笔划阵列：35.5284；
/*弧长、圆周长*/
}

---

您可以轻松地使用css动画，然后只需通过单击函数将该类添加到svg中即可。像这样：

var弧点=[-31，-66，-101，-136，-171，-206，-241，-276]；
颜色=[“红”、“绿”、“蓝”、“橙”、“黄”、“紫”、“粉红”]；
对于（变量i=0；i
svg{
高度：100px；
宽度：100px；
}
圈{
笔画宽度：4px；
填充：透明；
}
#灰色的{
笔画：灰色；
}
#红色的{
笔画：红色；
行程数组：35.5284；/*弧长，圆周长*/
}
#绿色的{
笔画：绿色；
行程数组：35.5284；/*弧长，圆周长*/
}
#蓝色的{
笔画：蓝色；
行程数组：35.5284；/*弧长，圆周长*/
}
#橙色的{
笔画：橙色；
行程数组：35.5284；/*弧长，圆周长*/
}
#黄色的{
笔画：黄色；
行程数组：35.5284；/*弧长，圆周长*/
}
#紫色的{
笔画：紫色；
行程数组：35.5284；/*弧长，圆周长*/
}
#粉红的{
笔画：粉红色；
行程数组：35.5284；/*弧长，圆周长*/
}
.右转{
动画：向右旋转2s线性无限；
}
@向右旋转的关键帧{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
.向左旋转{
动画：向左旋转2s线性无限；
}
@向左旋转的关键帧{
从{
变换：旋转（0度）；
}
到{
变换：旋转（-360度）；
}
}

左边
对
也许你想要这样的东西


var colors=[“灰色”、“红色”、“绿色”、“蓝色”、“橙色”、“黄色”、“紫色”、“粉色”]；
var rotateOffset=0；
函数setcolors（）
{
对于（变量i=0；i
svg{
高度：100px；
宽度：100px；
}
圈{
笔画宽度：4px；
填充：透明；
}
#灰色的{
笔画：灰色；
}
#红色的{
笔画：红色；
行程数组：35.5284；/*弧长，圆周长*/
}
#绿色的{
笔画：绿色；
行程数组：35.5284；/*弧长，圆周长*/
}
#蓝色的{
笔画：蓝色；
行程数组：35.5284；/*弧长，圆周长*/
}
#橙色的{
笔画：橙色；
行程数组：35.5284；/*弧长，圆周长*/
}
#黄色的{
笔画：黄色；
行程数组：35.5284；/*弧长，圆周长*/
}
#紫色的{
笔画：紫色；
行程数组：35.5284；/*弧长，圆周长*/
}
#粉红的{
笔画：粉红色；
行程数组：35.5284；/*弧长，圆周长*/
}

左边
对
你想要无限旋转吗？@MrigankPawagi不，我不想要无限旋转。我希望颜色序列在下一点上逐个旋转。例如：如果红色弧strockDashoffset值为-31，则单击“顺时针旋转”将其值更改为-66，其他值也将更改为-35。因此，您希望它在每次单击时按一个颜色步长移动吗？是吗？是的，谢谢你帮我！但我希望它在特定的点上旋转。我想一个接一个地旋转颜色序列，这样我就可以通过颜色获得价值。非常感谢兄弟