使SVG在悬停时正确旋转

我正在尝试使svg圆线从svg的中心点旋转。在一分钟它在它的轴上旋转,这不是我想要发生的。关于如何解决这个问题的任何想法?

这是我的代码:

#lines {
  animation: antiClockwiseSpin 30s infinite linear;
  animation-play-state: paused;
}

svg:hover #lines {
  animation-play-state: running;
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


这是一个jsfiddle:https ://jsfiddle.net/alexgomy/fdkh0wzb/1/



1> Ori Drori..:

与HTML元素不同transform-origin,SVG元素的默认值为0 0(左上方)。你需要设置transform-origin: center;#lines

#lines {
  animation: antiClockwiseSpin 30s infinite linear;
  animation-play-state: paused;
  transform-origin: center;
}

svg:hover #lines {
  animation-play-state: running;
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes antiClockwiseSpin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


                <section class="erx-tct tags">
                    <a href="https://www.zhangshilong.cn/tags/1895.html" target="_blank">使SVG在悬停时正确旋转</a>                   </section>

网友留言(0条)

发表评论