How in svg do i have lines on hover??

Question

css

I use the ui kit plugin, close, and when hovering over an element, I want the cross to fold horizontally into one line.
Here is the structure:




It turns out that you need to change the coordinates of the lines, I thought using jquery .attr () but it turns out ford =)
I would like to know how this is done correctly, thanks!

Answer 1

Structure not attached.
In general, a folding cross can be done without SVG.
https://parisienne.ru/eshop/zhaket-vahine-mkt-studio/
You can see something similar on the mobile version.