saludando el siguiente código (dos círculos) se ejecutó cuando el puntero del mouse pasó sobre él, por lo que el color del círculo cambia de uno a otro. Lo edito para que ahora se vea como un ventilador o alguna animación de rotación, pero aún necesita el puntero del mouse para ejecutarse.
Espero encontrar ayuda para editarlo para que se ejecute automáticamente y siga repitiendo (bucle).
<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>gracias de antemano
¿Qué hay de usar animación en su lugar? Se ejecutará sin pasar el mouse por encima ni usar JavaScript.
En lugar de animar el dasharray (dashoffset), optaré por transformar/rotar. El dasharray es un poco complicado en este caso porque está cortado.
.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>