用8弧顺时针和逆时针旋转svg。

Question

请帮帮我。

我在这个图像图像中显示了这个svg，它的代码如下：

​

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'>
			  <circle cx='50' cy='50' r='45' id='gray'/>
			  <circle cx='50' cy='50' r='45' id='red'/>
			  <circle cx='50' cy='50' r='45' id='green'/>
			  <circle cx='50' cy='50' r='45' id='blue'/>
			  <circle cx='50' cy='50' r='45' id='orange'/>
			  <circle cx='50' cy='50' r='45' id='yellow'/>
			  <circle cx='50' cy='50' r='45' id='purple'/>
			  <circle cx='50' cy='50' r='45' id='pink'/>
			</svg>
</div>

​

现在我想通过点击一个按钮来旋转所有弧的顺时针和逆时针方向。问题是，我的思想是如何使功能和循环改变颜色和旋转顺时针和逆时针方向。

任何帮助都将不胜感激。提前感谢！

Answer 1

也许你想要这样的东西？

​

var colors = ["gray", "red", "green", "blue", "orange", "yellow", "purple", "pink"];
var rotateOffset = 0;

function setColours()
{
  for (var i = 0; i < colors.length; i++) {
    var arcIndex = (i + rotateOffset) % colors.length;
    document.querySelector("#" + colors[i]).style.strokeDashoffset = (arcIndex ) * -35.3;
  }
}

// Set initial colours
setColours();
    

// Button handlers
document.getElementById('left').addEventListener("click", function() {
  rotateOffset += (colors.length - 1);
  setColours();
});

document.getElementById('right').addEventListener("click", function() {
  rotateOffset++
  setColours();
});

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' >
    <circle cx='50' cy='50' r='45' id='gray'/>
    <circle cx='50' cy='50' r='45' id='red'/>
    <circle cx='50' cy='50' r='45' id='green'/>
    <circle cx='50' cy='50' r='45' id='blue'/>
    <circle cx='50' cy='50' r='45' id='orange'/>
    <circle cx='50' cy='50' r='45' id='yellow'/>
    <circle cx='50' cy='50' r='45' id='purple'/>
    <circle cx='50' cy='50' r='45' id='pink'/>
  </svg>
</div>

<button id="left">left</button>
<button id="right">right</button>

​

Answer 2

您可以轻松地使用css动画，然后在单击函数中将类添加到svg中。如下所示：

​

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];
    }
    
    
$('.left').click(function(){
    $("#orbit svg").attr("class", "rotating-left");
});
$('.right').click(function(){
    $("#orbit svg").attr("class", "rotating-right");
});  

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 */
}

.rotating-right {
  
  animation: rotating-right 2s linear infinite;
}
@keyframes rotating-right {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating-left {
  
  animation: rotating-left 2s linear infinite;
}
@keyframes rotating-left {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="orbit" >
      <svg viewBox='0 0 100 100' >
          <circle cx='50' cy='50' r='45' id='gray'/>
          <circle cx='50' cy='50' r='45' id='red'/>
          <circle cx='50' cy='50' r='45' id='green'/>
          <circle cx='50' cy='50' r='45' id='blue'/>
          <circle cx='50' cy='50' r='45' id='orange'/>
          <circle cx='50' cy='50' r='45' id='yellow'/>
          <circle cx='50' cy='50' r='45' id='purple'/>
          <circle cx='50' cy='50' r='45' id='pink'/>
        </svg>
    </div>
    <button class="left">left</button>
    <button class="right">right</button>

​

注意，我使用了$("#orbit svg").attr("class", "rotating-right");，因为您不能在svg和jQuery上使用jQuery