SVG-анимация: текст перемещается по кругу [дубликат] ⇐ Jquery

[Anonymous]

У меня вращается круг, и текст движется вместе с ним.
Когда круг вращается, текст нужно расположить, как показано на изображении ниже.


В CSS я вручную расположите текст через каждые 8,33% от @keyframes.
Мне не удалось сделать это для полного круга (пожалуйста, взгляните на мой CSS), потому что настройка текста на правильное положение занимает много времени .
Есть ли какой-нибудь динамичный или простой способ сделать это? Более того, у меня по этому кругу движутся еще несколько текстов. Я добавил больше текстов и обнаружил: в зависимости от длины текста они поворачивались и располагались в разных положениях.
Пожалуйста, помогите мне и очень признательны!
Обновление. Спасибо, администратор, что сообщили мне, что мой вопрос был продублирован с помощью поворота объектов по кругу с помощью CSS?! Я попробовал все соответствующие ответы в своем случае, но не получил ожидаемого результата:

• Мой случай: круг вращается и перемещает текст. . Принимая во внимание, что круг не вращается в связанных ответах.
• Мой случай: текст (длинный текст) должен оставаться за пределами круга, когда круг вращается.
• В моем случае используется SVG.

Код: Выделить всё

#circle {
/* transform-origin: 150px 150px; */
animation: rotate 60s linear infinite ;
/*  transform-box: fill-box; */
transform-origin: center;
}
@keyframes rotate {
from {
rotate: 0;
}
to {
rotate: 360deg;
}
}

#TextSample{
animation: figmaMove 60s linear infinite ;
transform-box: fill-box;
transform-origin: top left;
}
@keyframes figmaMove {
0% {
translate: 0;
transform: rotate(0);
}
8.33% {
translate: -7px 0;
transform: rotate(-26deg);
}

16.66% {
translate: -10px 0;
transform: rotate(-56deg);
}
25% {
translate: -20px 0;
transform: rotate(-86deg);
transform-origin: top left;
}
33.33% {
translate: -65px -35px;
transform: rotate(-120deg);
transform-origin: bottom right;
}
41.66% {
translate: -85px -45px;
transform: rotate(-120deg);
transform-origin:  t o p   r i g h t ; < b r   / >         } < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; s v g   v e r s i o n = " 1 . 1 "   i d = " L a y e r _ 1 "   x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g "   x m l n s : x l i n k = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x l i n k "   x = " 0 p x "   y = " 0 p x " < b r   / >           w i d t h = " 5 4 6 . 6 6 7 p x "   h e i g h t = " 4 9 2 . 6 6 7 p x "   v i e w B o x = " 0   0   5 4 6 . 6 6 7   4 9 2 . 6 6 7 "   e n a b l e - b a c k g r o u n d = " n e w   0   0   5 4 6 . 6 6 7   4 9 2 . 6 6 7 " < b r   / >           x m l : s p a c e = " p r e s e r v e " & g t ; < b r   / > < b r   / > & l t ; r a d i a l G r a d i e n t   i d = " a n g l e s 1 2 _ 1 _ "   c x = " 2 7 6 . 3 9 2 6 "   c y = " 2 4 9 . 7 2 9 5 "   r = " 1 7 5 "   g r a d i e n t U n i t s = " u s e r S p a c e O n U s e " & g t ; < b r   / >         & l t ; s t o p     o f f s e t = " 0 "   s t y l e = " s t o p - c o l o r : # F F F F F F " / & g t ; < b r   / >         & l t ; s t o p     o f f s e t = " 1 "   s t y l e = " s t o p - c o l o r : # 0 0 0 0 0 0 " / & g t ; < b r   / > & l t ; / r a d i a l G r a d i e n t & g t ; < b r   / > & l t ; p a t h   i d = " a n g l e s 1 2 "   o p a c i t y = " 0 . 2 3 "   f i l l = " u r l ( # a n g l e s 1 2 _ 1 _ ) "   d = " M 2 7 6 . 3 9 3 , 7 4 . 7 2 9 c 1 . 2 7 2 , 0 , 2 . 3 0 3 , 7 8 . 3 5 , 2 . 3 0 3 , 1 7 5 < b r   / >         c 0 , 9 6 . 6 4 9 - 1 . 0 3 , 1 7 5 - 2 . 3 0 3 , 1 7 5 c - 1 . 2 7 1 , 0 - 2 . 3 0 3 - 7 8 . 3 5 1 - 2 . 3 0 3 - 1 7 5 C 2 7 4 . 0 9 , 1 5 3 . 0 8 , 2 7 5 . 1 2 1 , 7 4 . 7 2 9 , 2 7 6 . 3 9 3 , 7 4 . 7 2 9 z   M 2 7 6 . 3 9 3 , 2 5 2 . 0 3 2 < b r   / >         c 9 6 . 6 4 9 , 0 , 1 7 5 - 1 . 0 3 , 1 7 5 - 2 . 3 0 3 c 0 - 1 . 2 7 2 - 7 8 . 3 5 1 - 2 . 3 0 3 - 1 7 5 - 2 . 3 0 3 c - 9 6 . 6 4 9 , 0 - 1 7 5 , 1 . 0 3 1 - 1 7 5 , 2 . 3 0 3 < b r   / >         C 1 0 1 . 3 9 3 , 2 5 1 . 0 0 2 , 1 7 9 . 7 4 4 , 2 5 2 . 0 3 2 , 2 7 6 . 3 9 3 , 2 5 2 . 0 3 2 z   M 2 7 4 . 3 9 8 , 2 4 8 . 5 7 8 c - 4 8 . 3 2 4 , 8 3 . 7 0 1 - 8 6 . 6 0 7 , 1 5 2 . 0 6 9 - 8 5 . 5 0 5 , 1 5 2 . 7 0 5 < b r   / >         c 1 . 1 0 2 , 0 . 6 3 7 , 4 1 . 1 6 9 - 6 6 . 7 0 2 , 8 9 . 4 9 4 - 1 5 0 . 4 0 2 c 4 8 . 3 2 5 - 8 3 . 7 0 1 , 8 6 . 6 0 7 - 1 5 2 . 0 7 , 8 5 . 5 0 6 - 1 5 2 . 7 0 6 < b r   / >         C 3 6 2 . 7 9 1 , 9 7 . 5 3 9 , 3 2 2 . 7 2 3 , 1 6 4 . 8 7 7 , 2 7 4 . 3 9 8 , 2 4 8 . 5 7 8 z   M 2 7 5 . 2 4 1 , 2 4 7 . 7 3 5 c - 8 3 . 7 , 4 8 . 3 2 4 - 1 5 1 . 0 3 9 , 8 8 . 3 9 3 - 1 5 0 . 4 0 2 , 8 9 . 4 9 4 < b r   / >       s69.005-37.181,152.705-85.506c83.701-48.325,151.04-88.393,150.403-89.494C427.312,161.128,358.942,199.411,275.241,247.735z
M275.241,251.724c83.701,48.325,152.07,86.607,152.706,85.506c0.637-1.102-66.703-41.17-150.403-89.494
c-83.7-48.325-152.069-86.607-152.705-85.506S191.541,203.398,275.241,251.724z M274.398,250.881
c48.324,83.7,88.393,151.039,89.494,150.402c1.102-0.636-37.181-69.004-85.506-152.705
c-48.324-83.701-88.392-151.039-89.494-150.403C187.792,98.811,226.074,167.18,274.398,250.881z"/>

Подробнее здесь: https://stackoverflow.com/questions/792 ... g-a-circle