更改（编辑）svg 虚线圆从悬停动画运行无限运行

Question

问候语下一个代码（两个圆圈）当鼠标指针悬停在它上面时它是运行，所以圆圈颜色从一个变为另一个。我对其进行了编辑，使其现在看起来像扇子或一些旋转动画，但它仍然需要将鼠标指针指向运行。

我希望找到编辑帮助，使其自动运行，并保持重复（循环）。

<html>
<body>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">

<defs>
<style>
.another-circle {
  stroke-dasharray: 10;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset  1s linear ;
}
.another-circle:hover {
  stroke-dashoffset: 0;
}
</style>
</defs>


  
  <circle cx="50" cy="50" r="36" fill="transparent" stroke="red" stroke-width="4" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
 
</body>
</html>

提前致谢

Answer 1

使用 animation 怎么样？它会运行而无需悬停或使用 JavaScript。

我将选择 transform/rotate，而不是动画 dasharray (dashoffset)。 dasharray 在这种情况下有点棘手，因为它被截断了。

.another-circle {
  stroke-dasharray: 10;
  transform-origin: center;
  animation: rotateme 1s linear infinite;
}

@keyframes rotateme {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
  <circle cx="50" cy="50" r="36" fill="none" stroke="red" stroke-width="4" />
  <circle class="another-circle" cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>

更改（编辑）svg 虚线圆从悬停动画运行无限运行

change(edit) svg dashed line circle animate from hover run to infinite run

html

javascript

css

svg

更改（编辑）svg 虚线圆从悬停动画 运行 无限 运行

change(edit) svg dashed line circle animate from hover run to infinite run

html

javascript

css

svg

更改（编辑）svg 虚线圆从悬停动画运行无限运行