请帮我解决这个问题。
我已在此图片中显示此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'>
<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>
现在我想通过点击按钮顺时针和逆时针旋转所有弧形。 问题是，我的想法是如何使功能和循环改变颜色并顺时针和逆时针旋转。
任何帮助将不胜感激。 提前谢谢！
答案 0 :(得分：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");因为addClass svg与jQuery无法使用template<typename F>
struct functor
{
using type = F;
};
template<bool Noexcept, typename R, typename... Args>
struct functor<R (*)(Args...) noexcept(Noexcept)>
{
struct fn
{
R (*p)(Args...) noexcept(Noexcept);
R operator()(Args&&... args) const noexcept(Noexcept)
{
return p(std::forward<Args>(args)...);
}
};
using type = fn;
};
template<typename F>
using func = typename functor<std::decay_t<F>>::type;
template<typename... Fs>
struct over : func<Fs>...
{
template<typename... Gs>
over(Gs&&... gs) : func<Fs>{std::forward<Gs>(gs)}... {}
using func<Fs>::operator()...;
};
template<typename... Gs>
auto makeover(Gs&&... gs)
{
return over<func<Gs>...>{std::forward<Gs>(gs)...};
}
答案 1 :(得分：1)
也许你想要这样的东西？
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><form action="">
name:<br>
<input type="text" class="input1" id="input1" data-value="0">
<br>
gender:<br>
<select class="input1" id="option" data-value="0"></select>
<br><br>
<input type="submit" value="Submit">
</form>