Przesunięcie SVG z przesunięciem do kreski nie jest spójne
Mam serię okręgów z granicami złożonymi z mniejszych kółek, które nazywam „kropkami”. Animuję koła, obracając je za pomocą CSS3transform, każdy o 5 lub 15 stopni (naprzemiennie) więcej niż ostatni, zaczynając od środkowego koła, które nie obraca się wcale. To naprzemienne stopniowanie wynika z oryginalnego przesunięcia połowy z nich5deg
Sama animacja działa świetnie, ale przesunięcie między każdą kropką w okręgu nie jest spójne. Jest to oczywiste, gdy animacja się zakończy, niektóre kropki odskoczą. Gdyby były one wyłączone o stałą wartość, byłby to błąd w moich obliczeniach, ale kropki wokół tego samego okręgu przeskakują różne kwoty, co oznacza, że na początku są kompensowane różnymi kwotami. Vals, w swoim przykładzie na końcu swojej odpowiedzi, pokazuje również tę niespójność w offsecie
Oto jak skonfigurować każde koło. Odstęp między każdą kropką został określony za pomocą wzoruspacing = (radius × 2) × 3.14159265 ÷ numberOfCircles. The.001 jest umożliwienie Chrome zobaczenia kropek
<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001, spacing" stroke="color"/>
Czy ktoś może mi pomóc naprawić ten błąd przesunięcia renderowania SVG?
EDYTOWAĆ
vals i squeamish ossifrage zapewniły cudownie działające alternatywne rozwiązania tego problemu. Nadal jednak staram się naprawić problem z offsetem / renderowaniem, jeśli jest to możliwe