Анимация круга вперед и назад по пути
Привет, у меня есть базовая диаграмма потока энергии, как показано ниже.
SVG находится здесь
Как мне заставить цветные круги двигаться по цветным дорожкам? Я пробовал использовать что-то вроде
<animateMotion
dur = "10s"
repeatCount = "indefinite"
path = "m 281.66783,66.052163 c -58.15279,11.63055 -95.43899,64.652217 -95.43899,64.652217"
/>
но при этом желтый круг исчезает. Я тоже считаю, что этот метод не допускает разнонаправленности.
Мне нужно анимировать круги, чтобы они двигались в обоих направлениях по своему пути и с разной скоростью. Требуется ли для этого JavaScript или это можно сделать в SVG, чтобы минимизировать код для активации анимации?
Спасибо за любое руководство
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
56
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Похоже, вам нужны (массивы) keyPoints и keyTimes на <animateMotion> для позиционирования. (0=начало 1=конец)
Добавьте <animate> для других настроек атрибутов.
<svg viewBox = "0 0 200 100">
<path id = "PATH" stroke = "black" fill = "none" d = "M10 50H200" />
<circle r = "10" fill = "red">
<animateMotion dur = "5s" keyPoints = "0;1;0" keyTimes = "0;.8;1"
calcMode = "linear" repeatCount = "indefinite">
<mpath href = "#PATH" />
</animateMotion>
<animate
attributeName = "fill"
attributeType = "XML"
values = "red;green;yellow;hotpink;blue"
keyTimes= "0;0.4;0.6;0.8;1"
dur = "10s"
repeatCount = "indefinite"/>
<animate
attributeName = "r"
attributeType = "XML"
values = "10;15;10"
keyTimes= "0;0.5;1"
dur = "1s"
repeatCount = "indefinite"/>
</circle>
</svg>Другие вопросы по теме
Преобразование дуги пути SVG в DXF
Как объединить маски SVG?
Можно ли создать анимацию обводки SVG, которая анимируется одинаковой продолжительности независимо от длины обводки?
Полигоны с дырками в SVG
Панорамирование SVG: при нажатии центральной группы внутри SVG на область просмотра
Librsvg rsvg_handle_get_dimensions получает размер пикселя, который не отличается от размера рендеринга в браузере
Машинописный текст React с элементом SVG
Flutter Web - некоторые файлы svg не отображаются на мобильном устройстве
«ReactSVG» нельзя использовать как компонент JSX
Передача заголовка в svg с помощью vite-plugin-svgr
Похожие вопросы
Преобразование дуги пути SVG в DXF
Почему ответ ReqRes на мой запрос POST не возвращает включенные мной значения?
Как выполнить функцию, если цикл занимает много времени?
Блок, Объект, неопределенный ключ, неопределенная функция
Функция Async останавливается в середине
Проблема с получением графического API-интерфейса при следующем получении js (Ошибка: функциональность React «useContext» недоступна в этой среде.)
Как увеличить отдельные части изображения при прокрутке
Как я могу отображать и скрывать кнопки «Нравится/Не нравится» с помощью Javascript в моем веб-приложении?
Есть ли список кодов ошибок для WebSocket из пакета Node.JS ws?
Как я могу загрузить изображение из JavaScript в запросе на публикацию с одного экрана и перенести его на другой экран в Flask?
Одним из возможных решений было бы нарисовать путь (за которым следует точка) примерно так: path = "M 281.66783,66.052163 c -58.15279,11.63055 -95.43899,64.652217 -95.43899,64.652217 C186.23,130.70438 22 3.515,77,683 281,66783,66,05"` В ваш код я добавил жирный шрифт.