请帮我解决这个问题。带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>现在我想通过点击所有弧的顺时针和逆时针旋转按钮。 问题是，我的思想被困在如何使功能和循环改变颜色并顺时针和逆时针旋转。
任何帮助，将不胜感激。 在此先感谢！
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">leftbutton>
<button class="right">rightbutton>通知我用$("#orbit svg").attr("class", "rotating-right");作为svg与jQuery
也许你想这样的事情你不能用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">leftbutton>
<button id="right">rightbutton>这家伙很懒，还没有设置简介
