#css #reactjs #animation #svg #animatetransform
Вопрос:
Задача для анимации значка 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, анимация не применяется
Комментарии:
1. animateTransform для элементов <svg> широко не поддерживается, хотя и работает в Firefox. Лучше всего было бы улыбаться по x, y, ширине, высоте.
2. Если вы используете react, измените анимационное преобразование в useEffect [ширина, высота, x, y]
3. Привет, да, я использую React, что вы имеете в виду, изменить анимированное преобразование в useEffect? Не могли бы вы привести несколько примеров? Мое решение не работает,потому что CSS не анимировал x, y, ширину, высоту, когда он применяется непосредственно к SVG.