Tengo una serie de círculos con bordes compuestos por círculos más pequeños que llamaré 'puntos'. Entonces estoy animando los círculos girándolos con CSS3transform, cada uno por 5 o 15 grados (alternando) más que el último a partir del círculo medio sin girar en absoluto. Esta alternancia de grados se debe al desplazamiento original de la mitad de ellos.5deg

La animación en sí misma funciona muy bien, pero el desplazamiento entre cada punto en un círculo no es consistente. Esto se hace evidente cuando la animación se completa, algunos puntos saltan hacia atrás. Si todos estuvieran apagados por una cantidad constante, sería un error en mis cálculos, pero los puntos alrededor del mismo círculo saltan cantidades diferentes, lo que significa que, para empezar, se compensan cantidades diferentes. Vals, en su ejemplo al final de su respuesta, también muestra esta inconsistencia en la compensación

Aquí es cómo se configura cada círculo. El espaciado entre cada punto se determinó usando la fórmulaspacing = (radius × 2) × 3.14159265 ÷ numberOfCircles. los.001 Es permitir que Chrome vea los puntos.

<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001, spacing" stroke="color"/>

Aquí está la demo jsFiddle

¿Puede alguien ayudarme a arreglar este error de compensación de la representación SVG?

EDITAR

Vals y Squsish Ossifrage proporcionaron soluciones alternativas maravillosamente funcionales al problema. Sin embargo, todavía estoy buscando solucionar el problema de compensación / renderización si es posible