Анимация вращения для звезд в файле svg

У меня есть файл svg, я хочу, чтобы звезды крутились как роторы. Мой код выглядит следующим образом:

.my-spin {
    animation: spin 2s linear infinite;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
<svg enable-background = "new 0 0 951.7 589.2" version = "1.1" viewBox = "0 0 951.7 589.2" xml:space = "preserve" xmlns = "http://www.w3.org/2000/svg">

<circle cx = "567.1" cy = "162.1" r = "7.4" fill = "#fff"/>
		<polygon class = "my-spin" points = "567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill = "#F70606"/>
		<circle cx = "694.4" cy = "189.4" r = "7.1" fill = "#fff"/>
		<polygon class = "my-spin" points = "694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill = "#F70606" stroke = "#E20000" stroke-miterlimit = "10" stroke-width = ".6338"/>
		<circle cx = "522.1" cy = "302.7" r = "7.8" fill = "#fff"/>
		<polygon class = "my-spin" points = "522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill = "#F70606"/>
		<circle cx = "644.8" cy = "381.5" r = "6.8" fill = "#fff"/>
		<polygon class = "my-spin" points = "644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill = "#F70606"/>
		<circle cx = "346.5" cy = "274.1" r = "7.8" fill = "#fff"/>
		
    
    </svg>

Я пробовал следовать некоторым ссылкам, но это все еще не работает так, как я хочу.

Анимация вращения CSS3

https://codepen.io/teerapuch/pen/vLJXeR

https://flaviocopes.com/css-анимации/

Как заставить звезды вращаться как пропеллеры

Спасибо всем

transform-box: fill-box; ?
Temani Afif 19.07.2019 13:06

Первое, что приходит на ум: developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

DBS 19.07.2019 13:07

Кстати, вы можете использовать шаблон svg для звезды на кругах. Было бы меньше боли, чтобы изменить их точки для каждого имхо.

Salix 19.07.2019 21:12
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
801
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно подать заявку transform-box: fill-box; в .my-spin класс.

.my-spin {
    transform-box: fill-box;
    animation: spin 2s linear infinite;
transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
<svg enable-background = "new 0 0 951.7 589.2" version = "1.1" viewBox = "0 0 951.7 589.2" xml:space = "preserve" xmlns = "http://www.w3.org/2000/svg">

<circle cx = "567.1" cy = "162.1" r = "7.4" fill = "#fff"/>
		<polygon class = "my-spin" points = "567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill = "#F70606"/>
		<circle cx = "694.4" cy = "189.4" r = "7.1" fill = "#fff"/>
		<polygon class = "my-spin" points = "694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill = "#F70606" stroke = "#E20000" stroke-miterlimit = "10" stroke-width = ".6338"/>
		<circle cx = "522.1" cy = "302.7" r = "7.8" fill = "#fff"/>
		<polygon class = "my-spin" points = "522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill = "#F70606"/>
		<circle cx = "644.8" cy = "381.5" r = "6.8" fill = "#fff"/>
		<polygon class = "my-spin" points = "644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill = "#F70606"/>
		<circle cx = "346.5" cy = "274.1" r = "7.8" fill = "#fff"/>
		
    
    </svg>

Спасибо за ваше предложение

Tran Audi 19.07.2019 17:38

Другие вопросы по теме