2017-12-27 330 views
3

请帮我解决这个问题。带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>

现在我想通过点击所有弧的顺时针和逆时针旋转按钮。 问题是,我的思想被困在如何使功能和循环改变颜色并顺时针和逆时针旋转。

任何帮助,将不胜感激。 在此先感谢!

+0

你想无限旋转? –

+0

@MrigankPawagi不,我不想无限旋转。我希望颜色序列在下一个点上逐个旋转。例如:如果红色圆弧strockDashoffset值为-31,则点击顺时针旋转将其值更改为-66,其他值则相差-35。 – Maan56

+0

所以你想让它每次点击一步颜色步骤?是吗? –

回答

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>

+0

ThankYou这么多兄弟 – Maan56

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");作为svgjQuery

+0

感谢您的帮助!但我希望它在特定点上旋转。我想要逐个旋转颜色顺序,然后我可以通过颜色获得价值。 – Maan56