0

Task to animate the SVG icon:

<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>

width, height, x, y - change their parameters on click, and I need to animate it.

problem: I can't get hooked on these parameters with either css or <animateTransform />. If the SVG is circle, it adds animations without problems, if the parameters are changed on SVG itself, the animation is not applied

Detoner
  • 514
  • 1
  • 7
  • 15
  • 1
    animateTransform on elements isn't widely supported, though it does work in Firefox. Best would be SMIL on x, y, width, height. – Robert Longson Apr 06 '21 at 09:29
  • If you use react, change animate transform in useEffect [width, height, x, y] – Michael Rovinsky Apr 06 '21 at 12:10
  • Hi, yes I use React, what do you mean, change animate transform in useEffect? Can you please provide some examples? My solution does not work because CSS did not animate x,y, width, height when it's applying to SVG directly. – Detoner Apr 06 '21 at 13:12

0 Answers0