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

greeting the next code(two circle) it was run when mouse pointer hover over it, so the circle color change from one to another. i edit it so it now look like fan or some rotation animation, but it still need mouse pointer to run.

i hope find help for edit it so it auto run, and keep repeat(loop).

<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)"  cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
 
</body>
</html>

thanks in advance

CodePudding user response：

What about using animation instead? It will run without hovering or using JavaScript.

Instead of animating the dasharray (dashoffset) I will go for transform/rotate. The dasharray is a bit tricky in this case because it is cut off.

.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  cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>