帶8弧的圓弧svg順時針和逆時針旋轉

Question

請幫我解決這個問題。

我在這裏已經這個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>

現在我想通過點擊所有弧的順時針和逆時針旋轉按鈕。 問題是，我的思想被困在如何使功能和循環改變顏色並順時針和逆時針旋轉。

任何幫助，將不勝感激。 在此先感謝！

Answer 1

也許你想這樣的事情你不能用addClass？

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