Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
1 / 1 / 1
Регистрация: 12.08.2019
Сообщений: 46
1

как сделать чтобы красная стрелка у svg картинки бесконечно двигалась по часовой стрелке?

20.09.2019, 17:25. Показов 936. Ответов 2
Метки css (Все метки)

вот код svg картинки
чтобы реализовывалась анимация через css если можно то без js
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="95" height="105" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 249.99 286.66"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#FEFEFE;fill-rule:nonzero}
.fil3 {fill:#E42127;fill-rule:nonzero}
.fil2 {fill:#34302F;fill-rule:nonzero}
.fil1 {fill:#2F3956;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_1702761376">
<path class="fil0" d="M225.67 159.62c0,55.35 -44.87,100.22 -100.22,100.22 -55.35,0 -100.22,-44.87 -100.22,-100.22 0,-55.35 44.87,-100.22 100.22,-100.22 55.35,0 100.22,44.87 100.22,100.22z"/>
<path class="fil1" d="M125.52 65.68c-51.77,0 -93.89,42.12 -93.89,93.89 0,51.77 42.12,93.89 93.89,93.89 51.77,0 93.89,-42.11 93.89,-93.89 0,-51.77 -42.12,-93.89 -93.89,-93.89zm0 216.5c-67.61,0 -122.61,-55 -122.61,-122.61 0,-67.61 55,-122.61 122.61,-122.61 67.61,0 122.61,55 122.61,122.61 0,67.61 -55,122.61 -122.61,122.61z"/>
<polygon class="fil2" points="123.83,89.47 127.22,89.47 127.22,73.97 123.83,73.97 "/>
<polygon class="fil1" points="111.72,44.71 139.33,44.71 139.33,21.76 111.72,21.76 "/>
<polygon class="fil1" points="111.72,44.71 139.33,44.71 139.33,21.76 111.72,21.76 "/>
<path class="fil1" d="M104.18 27.46l42.69 0c0.57,0 1.02,-0.46 1.02,-1.02l0 -23.73c0,-0.57 -0.46,-1.02 -1.02,-1.02l-42.69 0c-0.57,0 -1.02,0.46 -1.02,1.02l0 23.73c0,0.57 0.46,1.02 1.02,1.02z"/>
<polygon class="fil1" points="68.35,63.52 74.2,60.81 64.55,39.98 58.69,42.7 "/>
<path class="fil1" d="M56.93 49.8l14.18 -6.57c0.33,-0.15 0.47,-0.55 0.32,-0.88l-7.35 -15.85c-0.15,-0.33 -0.54,-0.47 -0.88,-0.32l-14.18 6.57c-0.33,0.15 -0.47,0.55 -0.32,0.88l7.35 15.85c0.15,0.33 0.55,0.48 0.88,0.32z"/>
<polygon class="fil2" points="123.83,243.75 127.22,243.75 127.22,228.24 123.83,228.24 "/>
<polygon class="fil2" points="86.17,92.51 87.74,91.6 83.86,84.89 82.3,85.8 "/>
<polygon class="fil2" points="167.19,232.83 168.75,231.92 164.88,225.21 163.31,226.12 "/>
<polygon class="fil2" points="58.27,121.07 59.17,119.51 52.46,115.63 51.56,117.2 "/>
<polygon class="fil2" points="198.59,202.09 199.49,200.52 192.78,196.65 191.87,198.21 "/>
<polygon class="fil2" points="59.17,198.21 58.27,196.65 51.56,200.52 52.46,202.09 "/>
<polygon class="fil2" points="199.49,117.2 198.59,115.63 191.87,119.51 192.78,121.07 "/>
<polygon class="fil2" points="87.74,226.12 86.17,225.21 82.3,231.92 83.86,232.83 "/>
<polygon class="fil2" points="168.75,85.8 167.19,84.89 163.31,91.61 164.88,92.51 "/>
<polygon class="fil2" points="194.91,160.56 210.41,160.56 210.41,157.16 194.91,157.16 "/>
<polygon class="fil2" points="40.63,160.56 56.14,160.56 56.14,157.16 40.63,157.16 "/>
<polygon class="fil3" id="animateArrow" points="101.17,173.43 99.46,170.49 168.16,130.83 169.86,133.78 "/>
<path class="fil0" d="M130.9 159.58c-1.33,2.31 -4.29,3.11 -6.61,1.77 -2.31,-1.33 -3.11,-4.3 -1.77,-6.61 1.33,-2.31 4.29,-3.11 6.6,-1.77 2.31,1.33 3.11,4.3 1.77,6.61z"/>
<path class="fil2" d="M128.54 154c-1.74,-1.01 -3.98,-0.41 -4.98,1.33 -1.01,1.74 -0.41,3.98 1.33,4.98 1.74,1 3.98,0.41 4.98,-1.33 1.01,-1.74 0.41,-3.98 -1.33,-4.98zm-4.83 8.38c-2.88,-1.66 -3.87,-5.35 -2.2,-8.23 1.66,-2.88 5.35,-3.87 8.23,-2.21 2.87,1.66 3.87,5.35 2.2,8.23 -1.67,2.88 -5.35,3.87 -8.23,2.21z"/>
</g>
</g>
</svg>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.09.2019, 17:25
Ответы с готовыми решениями:

Как сделать, чтобы при наведении на пункт меню двигалась стрелка
Здравствуйте! Подскажите пожалуйста, как сделать такое меню, чтобы при нажатии на пункт меню...

Как сделать чтобы квадратик вертелся по часовой стрелке?
Помогите пожалуйста как сделать чтобы квадратик вертелся по часовой стрелки?? using System;...

Нажимая "стрелка влево", "стрелка вправо" превращать строку в столбец по или против часовой стрелке
Вывести на экран строку из 10 любых символов. Нажимая &quot;стрелка влево&quot;, &quot;стрелка вправо&quot; превращать...

Сделать, чтобы диаграмма вращалась по часовой стрелке вместе с подписями
построить диаграмму условия задачи: q: 1653, 1753, 1853, 1953 m: 789, 1376, 1674, 2398 эту...

__________________
2
1727 / 988 / 432
Регистрация: 12.05.2016
Сообщений: 2,468
20.09.2019, 18:19 2
Лучший ответ Сообщение было отмечено кристина34 как решение

Решение

кристина34, как-то так, поиграйтесь с transform-origin
CSS
1
2
3
4
5
6
7
8
9
 #animateArrow {
        transform-origin: 49.9% 53.9%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        100% {
          transform: rotate(360deg);
        }
      }
1
1 / 1 / 1
Регистрация: 12.08.2019
Сообщений: 46
20.09.2019, 19:24  [ТС] 3
спасибо огромное
очень прикольно выглядит )
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.09.2019, 19:24

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как сделать так чтобы страничка при увеличения разрешения не двигалась в разные стороны, и как сделать чтобы при открытии в опере и в других браузерах
все обьекты на странице не двигались в разные стороны???

Как сделать чтобы фигурка двигалась?
Как сделать чтобы фигурка двигалась? .386 .model stdcall, flat option casemap:none ...

Как сделать чтобы, строка на панели двигалась?
&lt;html&gt; &lt;head&gt; &lt;script language=&quot;JavaScript&quot;&gt; &lt;!-- hide function statbar(txt) { ...

Анимация. Как сделать, чтобы окружность двигалась по синусоиде?
Создать программу, показывающую движение окружности по синусоиде. Добавлено через 2 минуты...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.