Смещение штриха и штриха SVG не соответствует
У меня есть ряд кругов с границами, состоящими из меньших кругов, которые я назовуточки, Затем я анимирую круги, вращая их с помощью CSS3transformкаждый на 5 или 15 градусов (чередующийся) больше, чем последний, начиная со среднего круга, не вращающегося вообще. Это чередование градусов происходит из-за первоначального смещения половины из них5deg
Сама анимация прекрасно работает, но смещение между каждой точкой в круге не согласовано. Это становится очевидным, когда анимация завершается, некоторые точки возвращаются назад. Если бы все они были равны, то это было бы ошибкой в моих вычислениях, но точки вокруг одного и того же круга прыгали на разные величины, то есть для начала они смещались на разные величины. Вальс, в своем примере в конце своего ответа, также показывает это несоответствие в смещении
Вот как устроен каждый круг. Расстояние между каждой точкой определялось по формулеspacing = (radius × 2) × 3.14159265 ÷ numberOfCircles,.001 чтобы Chrome видел точки
Может кто-нибудь помочь мне исправить эту ошибку смещения рендеринга SVG?
РЕДАКТИРОВАТЬ
vals и squeamish ossifrage оба предоставили чудесно работающие альтернативные решения проблемы. Однако я'Я по-прежнему хочу на самом деле исправить проблему смещения / рендеринга, если такая возможность возможна