请帮我解决这个问题。带8弧的圆弧svg顺时针和逆时针旋转
我在这里已经这个SVG这个图像Image 中显示其我的代码：
var arcpoint = [-31, -66, -101, -136, -171, -206, -241, -276];
colors = ["red", "green", "blue", "orange", "yellow", "purple", "pink"];
for (var i = 0; i < colors.length; i++) {
document.querySelector("#" + colors[i]).style.strokeDashoffset = arcpoint[i];
}svg {
height: 100px;
width: 100px;
}
circle {
stroke-width: 4px;
fill: transparent;
}
#gray {
stroke: gray;
}
#red {
stroke: red;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#green {
stroke: green;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#blue {
stroke: blue;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#orange {
stroke: orange;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#yellow {
stroke: yellow;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#purple {
stroke: purple;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}
#pink {
stroke: pink;
stroke-dasharray: 35.5, 284;
/* length of arc, circumference of circle */
}<div id="orbit">
<svg viewBox='0 0 100 100'>
\t \t \t <circle cx='50' cy='50' r='45' id='gray'/>
\t \t \t <circle cx='50' cy='50' r='45' id='red'/>
\t \t \t <circle cx='50' cy='50' r='45' id='green'/>
\t \t \t <circle cx='50' cy='50' r='45' id='blue'/>
\t \t \t <circle cx='50' cy='50' r='45' id='orange'/>
\t \t \t <circle cx='50' cy='50' r='45' id='yellow'/>
\t \t \t <circle cx='50' cy='50' r='45' id='purple'/>
\t \t \t <circle cx='50' cy='50' r='45' id='pink'/>
\t \t \t svg>
div>现在我想通过点击所有弧的顺时针和逆时针旋转按钮。 问题是，我的思想被困在如何使功能和循环改变颜色并顺时针和逆时针旋转。
任何帮助，将不胜感激。 在此先感谢！
这家伙很懒，还没有设置简介
