Задать вопрос
@MiNiMoZg

Трансформирование path в svg, как анимировать положение только 1 точки в линии?

Добрый день.
Помогите пожалуйста решить следующую задачу в svg.
Имеется линия, которая вращается в опорной точке 400, 400(начальная точка линии) на 30 градусов
<path d="M 400,400 l 0,-50 z"
        id="mp"
        fill="orange" stroke="green" stroke-width="1">
  <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 400 400"
      to="30 400 400"
      dur="4s"
      repeatCount="indefinite"/>
</path>


Подскажите, как можно сделать так, что бы после окончания анимации, начиналась новая анимация возвращая линию на исходную позицию, затем снова стартовала первая анимация. Нужно получить примерно такое же движение, как у дворников в автомобиле.
  • Вопрос задан
  • 204 просмотра
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы