Проблема с анимацией SVG

Задача анимировать иконку SVG:

<svg width = “10” height = “10” x = “124.23852130911843” y = “88.06430110098822” id = “Transporter_1” data-name = “Transporter 1” xmlns = “http://www.w3.org/2000/ svg ”viewBox =“ 0 0 70 70 ”...> </svg>

ширина, высота, x, y - меняют их параметры по клику, а мне нужно это анимировать.

проблема: Я не могу зацепиться за эти параметры ни с css, ни с <animateTransform />. Если SVG - круг, он без проблем добавляет анимацию, если параметры изменяются в самом SVG, анимация не применяется

animateTransform для элементов <svg> широко не поддерживается, но работает в Firefox. Лучше всего SMIL по x, y, ширине, высоте.

— 06.04.2021 12:29

Если вы используете реакцию, измените преобразование анимации в useEffect [width, height, x, y]

— 06.04.2021 15:10

Привет, да, я использую React, что вы имеете в виду, изменить анимированное преобразование в useEffect? Не могли бы вы привести несколько примеров? Мое решение не работает, потому что CSS не анимирует x, y, ширину, высоту при непосредственном применении к SVG.

— 06.04.2021 16:12

css reactjs animation svg animatetransform

06.04.2021 12:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...